Grouped bar charts, in chart.js

I've seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below. I've not seen this as an explicit option in chart.js's online editor.

Is it possible to do grouped bar charts of this sort in chart.js? Is it easy? Is there a template for it in their online editor?

129707 次浏览
小开
最佳答案

Yes, you can provide multiple data sets using the datasets property, which is an array of containing groupings of values. Each data set contains a series of values in data that correspond to the labels.

See two slightly different examples below depending on your version of 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 });

See this JSFiddle.

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,
}
}]
}
}
});

See this JSFiddle.

小开

Yes,it is possible to do grouped bar charts of this sort in chart.js and so easy

Step by Step:-

Step1:-

First of all add the script link of charts.js:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

Step2:-

Add div in body of html'

 <body>
<table>
<tr>
<td>
<div id="chart_div"  style="width: 800px; height: 300px;">
</div>
</td>
</tr>
</table>
</body>

Step3:-

<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"
}

Note-:You can make multiple Var data which you want to display and only give the yAxisID to one var Data which then display as one group yaxis

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>

Note:- When I am trying to use this offline Chart.js library and create chart for my case then this pretty solution helps me a lot :-

In picture Last Look:- In picture Last Look


提交答案