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'
        });

问题：如果可能的话，如何在绘制条形图后为chartjs图表按标签排序？

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)

小提琴 - http://jsfiddle.net/jk1k0g5u/

绘制条形图后的Chartjs条形顺序调整

1 个答案: