javascript - 绘制条形图后Chartjs条形顺序调整

Question

在 chartjs document ，您可以使用 update() 方法重绘条形图的值更改，但不能更改条形图标签或更改条形图顺序。

我想要做的是在通过 myBarChart.addData() 将新柱添加到图表后按标签对柱顺序进行排序。

这是我尝试解决失败的问题:

        this.myBarChart.addData([1], tickString);
        // TODO: need to sort here by tick string when adding new one!
        this.myBarChart.datasets[0].bars = _.sortBy(bars, function(bar){

            return parseFloat(bar.label); // label example: '1.223', '1.44'
        });

问题: 如果可能的话，绘制条形图后如何按图表标签对条形图进行排序？

Answer 1

以下是如何使用单独的函数来完成此操作。改编自How can I sort, insert in between and update full dataset in chartjs?

var MyBarChartMethods = {
    // sort a dataset
    sortByLabel: function (chart) {
        // get data from chart elements (instead of messing up the actual data object)
        var data = []
        chart.datasets.forEach(function (dataset, i) {
            dataset.bars.forEach(function (bar, j) {
                if (i === 0) {
                    data.push({
                        label: parseFloat(chart.scale.xLabels[j]),
                        values: [bar.value]
                    })
                } else
                    data[j].values.push(bar.value)
            });
        })

        // sort the data based on label
        data.sort(function (a, b) {
            if (a.label > b.label)
                return 1;
            else if (a.label < b.label)
                return -1;
            else
                return 0;
        })

        // update the chart elements using the sorted data
        chart.datasets.forEach(function (dataset, i) {
            dataset.bars.forEach(function (bar, j) {
                if (i === 0)
                    chart.scale.xLabels[j] = data[j].label;
                bar.label = data[j].label;
                bar.value = data[j].values[i];
            })
        });
        chart.update();
    },
}

你这样调用它

MyBarChartMethods.sortByLabel(myBarChart)

<小时/>

fiddle - http://jsfiddle.net/jk1k0g5u/