在条形图Chart.js中重新排序条形图

时间:2017-01-27 01:46:06

标签: javascript charts chart.js

我正在使用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);

非常感谢!

汤姆。

0 个答案:

没有答案