![](/img/trans.png)
[英]Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
[英]Stacked Bar Chart With Line Chart In Charts.js
我可以用线条制作标准条形图,但如何用线条制作堆积条形图?
例如,这是我用于带有线条的条形图的代码,我应该进行哪些编辑/更改,以便可以将它与堆叠条形图一起使用? 这是堆叠条形图https://www.chartjs.org/samples/latest/charts/bar/stacked.html的示例,这是带有线Z5E056C500A1C4B6A75D10的条形图示例/samples/latest/charts/combo-bar-line.html
var ctx = document.getElementById('myChart');
var config = {
type: 'bar',
options: {
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
if (datasets.length) {
for (var i = 0; i < datasets.length; ++i) {
text.push('<li>');
if (datasets[i].type=='line') {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
} else {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
}
text.push(datasets[i].label);
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
},
legend: {
display: false,
},
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}, {
type: "time",
id: "axis-time",
display: false,
}, ],
},
},
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-time",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},{
label: "Dataset2",
type: "bar",
backgroundColor: "#ff0000",
borderColor: "#ff0000",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
}]
},
};
var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
请参阅 Chart.js 文档以供参考: https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart
假设您添加了另一个数据集:
{
label: "Dataset3",
type: "bar",
backgroundColor: "#00ff00",
borderColor: "#00ff00",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [ 149703, 122015, 123596, 164856, 136928, 220957, 213136, 235956, 187194, 183432, 163078, 138721 ]
}
您需要向 X 和 Y 轴刻度添加额外的配置:
scales: {
xAxes: [ { stacked: true }],
yAxes: [ { stacked: true }]
}
var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["< 1","1 - 2","3 - 4","5 - 9","10 - 14","15 - 19","20 - 24","25 - 29","> - 29"], datasets: [{ label: "Dataset1", type: "line", backgroundColor: "#0000FF", borderColor: "#0000FF", borderWidth: 1, fill: false, yAxisID: "axis-time", data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502] },{ label: "Dataset2", type: "bar", backgroundColor: "#ff0000", borderColor: "#ff0000", borderWidth: 1, fill: true, yAxisID: "axis-bar", data: [ 149703, 122015, 123596, 164856, 136928, 220957, 213136, 235956, 187194, 183432, 163078, 138721 ] },{ label: "Dataset3", type: "bar", backgroundColor: "#00ff00", borderColor: "#00ff00", borderWidth: 1, fill: true, yAxisID: "axis-bar", data: [ 149703, 122015, 123596, 164856, 136928, 220957, 213136, 235956, 187194, 183432, 163078, 138721 ] }], }, options: { tooltips: { displayColors: true, }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true, id: 'axis-bar' }, { stacked: true, id: 'axis-time', display: false, }] }, responsive: true, maintainAspectRatio: false, legend: { display: false }, legendCallback: function(chart) { var text = []; text.push('<ul class="' + chart.id + '-legend">'); var data = chart.data; var datasets = data.datasets; if (datasets.length) { for (var i = 0; i < datasets.length; ++i) { text.push('<li>'); if (datasets[i].type=='line') { text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>'); } else { text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>'); } text.push(datasets[i].label); text.push('</li>'); } } text.push('</ul>'); return text.join(''); } } }); var legend = myChart.generateLegend(); document.getElementById("legend").innerHTML = legend;
canvas{ background:#fff; height:400px; }
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script> <div class="wrapper"> <canvas id="myChart"></canvas> <div id="legend"></div> </div>
我还创建了一个 CodePen,其代码与显示堆叠条形图和折线图的代码相同: https://codepen.io/pzi/pen/GRoObmq
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.