[英]Grouped bar charts, in chart.js
I've seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below.我见过其他支持分组条形图的 javascript 图表库,如下图所示。 I've not seen this as an explicit option in chart.js's online editor.
在chart.js 的在线编辑器中,我没有将其视为显式选项。
Is it possible to do grouped bar charts of this sort in chart.js?是否可以在 chart.js 中制作此类分组条形图? Is it easy?
这简单吗? Is there a template for it in their online editor?
他们的在线编辑器中有模板吗?
Yes, you can provide multiple data sets using the datasets
property, which is an array of containing groupings of values.是的,您可以使用
datasets
属性提供多个数据集,这是一个包含值分组的数组。 Each data set contains a series of values in data
that correspond to the labels
.每个数据集都包含一系列与
labels
相对应的data
值。
See two slightly different examples below depending on your version of Chart.js.根据您的 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 });
See this JSFiddle .看到这个 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,
}
}]
}
}
});
See this JSFiddle .看到这个 JSFiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.