我见过其他支持分组条形图的javascript图表库,如下图所示。我还没有在chart.js的在线编辑器中将其视为显式选项。
是否可以在chart.js中进行这种分组的条形图?这简单吗?他们的在线编辑器中是否有模板?
Answers:
是的,您可以使用datasets
属性提供多个数据集,该属性是一个包含值分组的数组。每个数据集都包含一系列与data
相对应的值labels
。
根据您的Chart.js版本,请参见下面的两个稍有不同的示例。
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
fillColor: "blue",
data: [3,7,4]
},
{
label: "Red",
fillColor: "red",
data: [4,3,5]
},
{
label: "Green",
fillColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx).Bar(data, { barValueSpacing: 20 });
看到这个JSFiddle。
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3,7,4]
},
{
label: "Red",
backgroundColor: "red",
data: [4,3,5]
},
{
label: "Green",
backgroundColor: "green",
data: [7,2,6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
看到这个JSFiddle。
2
– Chart.js的默认行为是采用最小值–并非0
您所期望的。我已经更新了该示例以使其更加清晰,但是它可以正确呈现。