如何在chartjs中排序，插入之间和更新完整数据集？ [英] How can I sort, insert in between and update full dataset in chartjs?

问题描述

chartjs存在一些问题，使用简单的更新方法无法解决。

I have a few issues with chartjs which simple update method won't solve.

我想知道是否存在以下选项：

I wonder if there is an option to:

1. 无痛地对数据集进行排序；


2. 在两点之间插入一些数据；


3. 重新加载整个图表而不用
   全新的图表替换画布？

推荐答案

没有内置选项，但是使用 addData ， removeData 方法编写自己的代码非常容易

There is no option built in, but it is pretty easy to write your own using the addData, removeData methods that Chart.js provides.

var MyBarChartMethods = {
    // sort a dataset
    sort: function (chart, datasetIndex) {
        var data = []
        chart.datasets.forEach(function (dataset, i) {
            dataset.bars.forEach(function (bar, j) {
                if (i === 0) {
                    data.push({
                        label: chart.scale.xLabels[j],
                        values: [bar.value]
                    })
                } else 
                    data[j].values.push(bar.value)
            });
        })

        data.sort(function (a, b) {
            if (a.values[datasetIndex] > b.values[datasetIndex])
                return -1;
            else if (a.values[datasetIndex] < b.values[datasetIndex])
                return 1;
            else
                return 0;
        })

        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();
    },
    // reload data
    reload: function (chart, datasetIndex, labels, values) {
        var diff = chart.datasets[datasetIndex].bars.length - values.length;
        if (diff < 0) {
            for (var i = 0; i < -diff; i++)
                chart.addData([0], "");
        } else if (diff > 0) {
            for (var i = 0; i < diff; i++)
                chart.removeData();
        }

        chart.datasets[datasetIndex].bars.forEach(function (bar, i) {
            chart.scale.xLabels[i] = labels[i];
            bar.value = values[i];
        })
        chart.update();
    }
}

这样称呼（其中myBarChart是您的图表）

which you call like so (where myBarChart is your chart)

// sort
MyBarChartMethods.sort(myBarChart, 0)
// reload - same number of values
MyBarChartMethods.reload(myBarChart, 0, ["J", "F", "M", "A", "M", "J", "J"], [1, 2, 3, 4, 5, 6, 7])
// reload - more values
MyBarChartMethods.reload(myBarChart, 0, ["J", "F", "M", "A", "M", "J", "J", "A"], [1, 2, 3, 4, 5, 6, 7, 8])
// reload - less values
MyBarChartMethods.reload(myBarChart, 0, ["J", "F", "M", "A", "M"], [1, 2, 3, 4, 5])

插入2点是重新加载的特殊情况，因此您可以使用相同的功能（或轻松编写自己的函数）

Inserting 2 points is special case of reload, so you can use the same function (or write your own based on that easily)

小提琴- http：// jsfiddle .net / Lkdxxkfa /

这篇关于如何在chartjs中排序，插入之间和更新完整数据集？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！