Charts Chart.js堆叠条形图-按值对条形图中的值进行排序

我尝试使用chart.js framework 2.7版实现一个堆叠条形图，但遇到了以下问题：每个条形图中的单个数据元素的绘制顺序与JSON结构中提供的顺序相同，这是绝对合乎逻辑且可以理解的。我想对它们进行排序：最大的元素在底部，最小的元素在顶部

我想它可以通过一些插件定制的黑魔法来实现，但我无法理解

任何帮助都将不胜感激

例如：

var chart=new Chartdocument.getElementById'canvas'{ 类型：'bar'， 数据：{ 标签：[2018-07-062018-07-072018-07-082018-07-092018-07-10]， 数据集：[ { 标签：数据集1， 背景颜色：红色， 数据：[{x:2018-07-06，y:1}，{x:2018-07-07，y:2}，{x:2018-07-08，y:3}] }, { 标签：数据集2， 背景颜色：蓝色， 数据：[{x:2018-07-06，y:3}，{x:2018-07-07，y:2}，{x:2018-07-08，y:1}] }, { 标签：数据集3， 背景颜色：绿色， 数据：[{x:2018-07-06，y:2}，{x:2018-07-07，y:1}，{x:2018-07-08，y:2}] } ], 边框宽度：1 }, 选项：{ 回答：是的， MaintaintAspectRatio:false， 标题：{ 显示：对， 文本：“测试” }, 比例：{ xAxes:[{ 对,， 时间：{ 单位：'天' } } ], 雅克斯：[{ 对,， 滴答声：{ 贝吉纳泽罗：是的 } } ] } } };

---

也许可以做得更有效和/或更漂亮，但我必须自己解决

/* *chart.js不支持按值排序的堆叠条形图， *因此，需要使用自定义插件执行此功能 */ Chart.plugins.register{ /* *按值对数据排序并计算条形堆栈的值 */ 前绘图图{ //在图表实例中创建数据容器 chart.sortedData={}； //迭代数据集 chart.data.datasets.forEachdataset，datasetIndex=>{ //遍历数据集记录 dataset.data.forEachdata，索引=>{ //为条形图堆栈数据创建数据容器 if！chart.sortedData[索引]{ chart.sortedData[索引]={ 数据：[] }; } //保存数据 chart.sortedData[index].data[datasetIndex]={ DataSetidex:DataSetidex， 隐藏：chart.getDatasetMetadatasetIndex.hidden？真：假， 颜色：dataset.backgroundColor， 值：dataset.data[index].y， y:chart.getDatasetMetadatasetIndex.data[index]。\u model.y， base:chart.getDatasetMetadatasetIndex.data[index]。\u model.base， }; }; }; var chartTop=图表刻度['y轴-0'].顶部； var max=图表刻度['y轴-0'].max； var h=图表刻度['y轴-0']。高度/最大值； //迭代数据集 chart.data.datasets.forEachdataset，datasetIndex=>{ //遍历数据集记录 dataset.data.forEachdata，索引=>{ //按值对条形图堆栈中的数据进行排序 chart.sortedData[index].data=Object.keyschart.sortedData[index].data .mapk=>chart.sortedData[index]。数据[k] .sorta，b=>a.value-b.value； //迭代堆栈记录 chart.sortedData[index].data.forEachd，i=>{ //计算基准值 d、 base=chartTop+max-Object.keyschart.sortedData[index].data .mapk=>chart.sortedData[index]。数据[k]。值 .reducea，b=>a+b，0*h +Object.keyschart.sortedData[index].数据 .mapk=>chart.sortedData[index]。数据[k] .filterd=>d.hidden .reducea，b=>a+b.值，0*h； //使用以前记录的值增加基值 对于var j=0；j{ var el=chart.sortedData[index].data.filtere=>e.datasetIndex===args.index[0]； 数据。_model.y=el.y； 数据。_model.base=el.base； }; } }; var chart=new Chartdocument.getElementById'c 安瓦斯'{ 类型：'bar'， 数据：{ 标签：[2018-07-062018-07-072018-07-082018-07-092018-07-10]， 数据集：[ { 标签：数据集1， 背景颜色：红色， 数据：[{x:2018-07-06，y:1}，{x:2018-07-07，y:2}，{x:2018-07-08，y:3}] }, { 标签：数据集2， 背景颜色：蓝色， 数据：[{x:2018-07-06，y:3}，{x:2018-07-07，y:2}，{x:2018-07-08，y:1}] }, { 标签：数据集3， 背景颜色：绿色， 数据：[{x:2018-07-06，y:2}，{x:2018-07-07，y:1}，{x:2018-07-08，y:2}] } ], 边框宽度：1 }, 选项：{ 回答：是的， MaintaintAspectRatio:false， 标题：{ 显示：对， 文本：“测试” }, 比例：{ xAxes:[{ 对,， 时间：{ 单位：'天' } } ], 雅克斯：[{ 对,， 滴答声：{ 贝吉纳泽罗：是的 } } ] } } };

---

非常感谢你这么做。