分组条形图，在chart.js中
分组条形图，在chart.js中
提问于 2015-01-28 06:00:55
我见过其他支持分组条形图的javascript图表库，如下图所示。在chart.js的在线编辑器中，我没有看到这是一个显式的选项。
在chart.js中可以制作这种类型的分组条形图吗？这很容易吗？在他们的在线编辑器中有没有一个模板？
回答 1
Stack Overflow用户
回答已采纳
发布于 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,
}
}]
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28180871
复制相关文章
相似问题