我见过其他支持分组条形图的javascript图表库,如下图所示。在chart.js的在线编辑器中,我没有看到这是一个显式的选项。
在chart.js中可以制作这种类型的分组条形图吗?这很容易吗?在他们的在线编辑器中有没有一个模板?
发布于 2015-01-28 07:20:55
可以,您可以使用datasets
属性提供多个数据集,该属性是一个包含值分组的数组。每个数据集都包含一系列与labels
对应的data
格式的值。
请看下面两个略有不同的示例,具体取决于您的Chart.js版本。
Chart.js v1.x
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 });
Chart.js v2.x
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,
}
}]
}
}
});
https://stackoverflow.com/questions/28180871
复制相似问题