我尝试使用Chart.js框架(版本2.7)实现堆叠条形图,但遇到了以下问题:单个数据元素按照在JSON结构中提供的顺序绘制在每个条形图中(这是绝对合理和可理解的)。我希望它们能够排序:最大的元素在条形图底部,最小的元素在其顶部。
在这个例子中,我希望每一列中颜色的顺序相反:
第一列是蓝绿红,
第二列是红蓝绿或蓝红绿,
第三列是红绿蓝。
我认为可以使用一些插件自定义黑魔法来完成,但无法想出方法。
任何帮助将不胜感激。
示例:
var chart = new Chart(document.getElementById('canvas'), {
type : 'bar',
data : {
labels : ["2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10"],
datasets : [
{
label: "Dataset 1",
backgroundColor: "red",
data: [ {x: "2018-07-06", y: 1}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 3}]
},
{
label: "Dataset 2",
backgroundColor: "blue",
data: [ {x: "2018-07-06", y: 3}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 1}]
},
{
label: "Dataset 3",
backgroundColor: "green",
data: [ {x: "2018-07-06", y: 2}, {x: "2018-07-07", y: 1}, {x: "2018-07-08", y: 2}]
}
],
borderWidth : 1
},
options : {
responsive : true,
maintainAspectRatio : false,
title : {
display : true,
text : 'Test'
},
scales : {
xAxes : [ {
stacked : true,
time : {
unit : 'day'
}
} ],
yAxes : [ {
stacked : true,
ticks : {
beginAtZero : true
}
} ]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="canvas" height="500" width="500"></canvas>