在图表 JS 中从最低值到最高值对图表进行排序

Question

我有这个起始代码，我正在尝试弄清楚如何将这些数据从最高到最低排序。代码可以正确排序值，但 yAxis 中的标签是错误的。

我自己试过了，但这段代码对我来说很高级。

这是片段

//after the data is sorted
  let meta = chart.getDatasetMeta(0);
  let newMeta = [];
  let labels = chart.data.labels;
  let newLabels = [];
  

  meta.data.forEach((a, i) => {
    newMeta[dataIndexes[i]] = a;
    newLabels[dataIndexes[i]] = chart.data.labels[i];
  });

  meta.data = newMeta;
  chart.data.datasets[0].data = dataArray;
  chart.data.labels = newLabels;
    }
  }

完整代码在这里：https://jsfiddle.net/3seduh9k/

Answer 1

这是更新：

if (chart.options.sort) {
      let labels = chart.data.labels;
      let dataArray = chart.data.datasets[0].data.slice();
      let mapValueLabel = {};
      dataArray.forEach((value, index) => {
        mapValueLabel[value] = labels[index];
      });
      // sort data array as well
      dataArray.sort((a, b) => b - a);
      let meta = chart.getDatasetMeta(0);
      let newLabels = [];
      dataArray.forEach((a, i) => {
        newLabels[i] = mapValueLabel[a];
      });
      chart.data.datasets[0].data = dataArray;
      chart.data.labels = newLabels;
        }
      }

演示： https://jsfiddle.net/woL9ynpv/

我的改变很简单。我创建地图以保存值和标签：

map{value:label}

对值进行排序后，我们迭代新的列表数据数组并根据值键分配标签。

在图表 JS 中从最低值到最高值对图表进行排序

Sort a Chart from Lowest to Highest Value in Chart JS

javascript

csv

sorting

chart.js

yaxis