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

vjrehmav  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(230)

我需要创建一个气泡图样式的图表,其中有两个轴,这两个都是文字,而不是文本。
在我的示例中,我希望:

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

由此,我想绘制每辆车订购了多少辆,例如,如果订购了2辆红色汽车和1辆蓝色大车,则红色小车上会出现一个气泡,其大小是蓝色大车上气泡的两倍。
我已经对charts.js做了一些工作,但是我的示例中没有一个涉及到如何使用文本而不是数字。
任何帮助将不胜感激,我已经看过这里的文档..输入链接描述在这里,但一直无法得到任何工作。
先谢谢你。

v1uwarro

v1uwarro1#

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

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,否则图表将变得倾斜,数据出现在网格线之外。
如果不是动态设置数据,并且知道每个轴的最小值和最大值,则可以设置刻度的最小值和最大值属性,并将轴类型指定为“category”。

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

lf3rwulv2#

您可以使用bordercolor radius为0线型图表它将作为折线图使用,并避免使用折线图它将显示为气泡图

相关问题