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

【问题标题】：Sort a Chart from Lowest to Highest Value in Chart JS在图表 JS 中从最低到最高值对图表进行排序
【发布时间】：2021-10-21 10:32:20
【问题描述】：

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

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

这是sn-p

//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/

【问题讨论】：

标签： javascript csv sorting chart.js yaxis

【解决方案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}

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

【讨论】：