我看到其他支持分组柱状图的JavaScript图表库,就像下面图片中的那样。我没有在chart.js的在线编辑器中看到这个作为一个明确的选项。
在chart.js中是否可以进行这种类型的分组柱状图? 是容易的吗? 在他们的在线编辑器中是否有模板?
我看到其他支持分组柱状图的JavaScript图表库,就像下面图片中的那样。我没有在chart.js的在线编辑器中看到这个作为一个明确的选项。
在chart.js中是否可以进行这种类型的分组柱状图? 是容易的吗? 在他们的在线编辑器中是否有模板?
是的,您可以使用 datasets
属性提供多个数据集,它是一个包含值分组的数组。每个数据集都包含一系列与 labels
对应的 data
值。
根据您使用的 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。
是的,在chart.js中可以轻松地制作这种类型的分组条形图。
步骤:
第一步:
首先添加charts.js的脚本链接:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
步骤2:
在HTML的body中添加div
<body>
<table>
<tr>
<td>
<div id="chart_div" style="width: 800px; height: 300px;">
</div>
</td>
</tr>
</table>
</body>
步骤3:
<script>
var densityCanvas = document.getElementById("densityChart");
var Data1 = {
label: 'A',
data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderColor: 'rgba(99, 132, 0, 1)',
yAxisID: "y-axis-gravity"
}
var Data2 = {
label: 'B',
data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderColor: 'rgba(99, 132, 0, 1)',
//yAxisID: "y-axis-gravity"
}
var Data3 = {
label: 'C',
data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderColor: 'rgba(99, 132, 0, 1)',
//yAxisID: "y-axis-gravity"
}
注意:您可以创建多个要显示的变量数据,并仅将yAxisID赋值给其中一个变量数据,这样它们会作为一组y轴显示。
var planetData = {
labels: ["A", "B", "C"],
datasets: [Data1,Data2, Data3 ]
};
var chartOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.4
}],
yAxes: [{
id: "y-axis-Registered"
}
]
}
};
var barChart = new Chart(densityCanvas, {
type: 'bar',
data: planetData,
options: chartOptions
});
</script>
注意: 当我尝试使用这个离线的Chart.js库并为我的情况创建图表时,这个漂亮的解决方案帮了我很多忙:-
在图片中最后一眼:- 在图片中最后一眼