条形图绘制后的Chartjs条形图调整 [英] Chartjs bar order adjustment after bar chart is drawn

问题描述

在 chartjs文档中，您可以使用update（）重绘条形值更改方法，但条形标签更改或条形顺序更改不会重绘。

In the chartjs document, you can use update() method to redraw bar the value change, but not the bar label change, or bar order change.

我想做的是在myBarChart.addData（）将新的条形图添加到图表后，按标签对条形图进行排序。

What I want to do is to sort the bar order by label after new bar is added to chart by myBarChart.addData().

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

Here is my attempt to solve the problem which fails:

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

问题：
如果可能，如何按

Question: If possible, how to sort bar by label for a chartjs chart after bar chart is drawn?

推荐答案

在这里，您将使用单独的功能执行此操作。改编自如何在chartjs中排序，插入之间并更新完整数据集？

Here's how you do it with a separate function. Adapted from 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条形图调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！