javascript - Charts.js - 带有两个字轴的气泡图

Question

我需要创建一个气泡图样式的图表，它有两个轴，都是单词而不是文本。

在我的示例中，我想要:

• x 轴是颜色，例如红、蓝、黄
• y 轴为汽车，例如小型车、中型车、大型车

由此我想绘制出每辆车的订购数量，例如如果订购了 2 辆红色小车并订购了一辆蓝色大车，那么小红色上会有一个气泡，其大小是大蓝色气泡的两倍。

我已经用charts.js做了一些工作，但是我的示例都没有涵盖如何使用文本而不是数字。

任何帮助将不胜感激，我已经浏览了这里的文档.. enter link description here ，但一直无法让任何东西发挥作用。

提前致谢。

Answer 1

我最近对数据集有相同的要求，并在缩放选项中为每个轴使用了回调函数。我将标签的值列表填充到一个数组中，然后使用点的索引执行查找以重命名刻度标签。

var colours = ["Red", "Blue", "Green", "Yellow"];
var carSizes = ["Small", "Medium", "Large"];

// Small Red = 10
// Small Green = 14
// Medium Yellow = 23
var dataPoints = [{x: 0, y: 0, r: 10}, {x: 2, y: 0, r: 14}, {x: 3, y: 1, r: 23}

var myBubbleChart = new Chart(bubbleCtx, {
            type: 'bubble',
            data: dataPoints,
            options: {
                title: {
                    display: true,
                    text: "Car Orders"
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            stepSize: 1,
                            callback: function (value, index, values) {
                                if (index < carSizes.length) {
                                    return carSizes[carSizes.length - (1 + index)]; //this is to reverse the ordering
                                }
                            }
                        },
                        position: 'left'
                    }],
                    xAxes: [{
                        ticks: {
                            stepSize: 1,
                            callback: function (value, index, values) {
                                if (index < colours.length) {
                                    return colours[index];
                                }
                            }
                        },
                        position: 'bottom'
                    }]
                }
            }
        });

经过多次试验和错误，我发现有必要将步长设置为 1，否则图表会因出现在网格线之外的数据而倾斜。

如果您没有动态设置数据并且知道每个轴的最小值和最大值，则可以设置刻度的 min 和 max 属性并将轴类型指定为“类别”。

yAxes: [{
    type: 'category',
    ticks: {
        stepSize: 1,
        min: 'Small',
        max: 'Large'
    },
    position: 'left'
}]