如何在chartjs中排序,插入之间和更新完整数据集? [英] How can I sort, insert in between and update full dataset in chartjs?
本文介绍了如何在chartjs中排序,插入之间和更新完整数据集?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
chartjs存在一些问题,使用简单的更新方法无法解决。
I have a few issues with chartjs which simple update method won't solve.
我想知道是否存在以下选项:
I wonder if there is an option to:
- 无痛地对数据集进行排序;
- 在两点之间插入一些数据;
- 重新加载整个图表而不用
全新的图表替换画布?
推荐答案
没有内置选项,但是使用 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屋!
查看全文