我正在使用Chart.js作为项目,我创建了一个水平条形图,其数据将根据各种输入进行更改。是否有可能使条形图按升序或降序“重新排列”?
目前我正在使用快速排序算法对数据和相关标签进行重新排序,但结果标签只是“改变”,我宁愿让动画显示条形图“重新排序”。
我的另一个问题是条形太大了:我减小了它们的厚度,但图表很大,条形之间有很多空间,我不知道如何减少。
这是我的代码:
const CHART = document.getElementById("chart");
Chart.defaults.global.animation.duration = 3000;
let barChart = new Chart(CHART, {
type: 'horizontalBar',
data: {
labels: ['France', 'United Kingdom', 'USA', 'New Zealand', 'Spain', 'Denmark'],
datasets: [
{
label:"Index",
data: [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}],
yAxes: [{
barThickness: 30
}]
}
}
});
function swap(labels, data, i, j) {
// Labels
tmpL = labels[i]
labels[i] = labels[j];
labels[j] = tmpL;
// Data
tmpD = data[i];
data[i] = data[j];
data[j] = tmpD;
}
function partition(labels, data, left, right) {
var pivot = data[Math.floor((left + right)/2)];
var i = left, j = right;
while (i<=j) {
while (data[i] < pivot) {
i++;
}
while (data[j] > pivot) {
j--;
}
if (i <= j) {
swap(labels, data, i, j);
i++;
j--;
}
}
return i;
}
function quickSort(labels, data, left, right) {
var indexPivot = partition(labels, data, left, right);
if (left < indexPivot - 1) {
quickSort(labels, data, left, indexPivot - 1);
}
if (indexPivot < right) {
quickSort(labels, data, indexPivot, right);
}
console.log(labels);
return data;
}
function show() {
for (var i = 0; i<barChart.data.datasets[0].data.length; i++) {
barChart.data.datasets[0].data[i] = Math.random();
}
barChart.data.datasets[0].data = quickSort(barChart.data.labels, barChart.data.datasets[0].data, 0, barChart.data.datasets[0].data.length - 1);
barChart.update();
}
setInterval(show, 5000);
非常感谢!
汤姆。