我需要创建一个具有两个轴的气泡图样式表,两个轴都是单词而不是文本。
在我的示例中,我想要:
轴x为颜色,例如红色,蓝色,黄色
y轴为汽车,例如小型车,中型车,大型车
据此,我想绘制每辆车的订购数量,例如如果订购了2辆红色的小汽车,而订购了一辆蓝色的大汽车,则小红色上的气泡将是大蓝色的气泡的两倍。
我对Charts.js做了一些工作,但是我的示例都没有涉及如何使用文本而不是数字。
对此,任何帮助将不胜感激,我在这里查看了文档。enter link description here,但无法使任何工作正常进行。
提前致谢。
最佳答案
我最近对数据集有相同的要求,并在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,否则图表将因网格线外出现的数据而歪斜。
如果您不是动态设置数据并且知道每个轴的最小值和最大值,则可以设置刻度的最小值和最大值属性,并将轴类型指定为“类别”。
yAxes: [{
type: 'category',
ticks: {
stepSize: 1,
min: 'Small',
max: 'Large'
},
position: 'left'
}]