Сортировка диаграммы от наименьшего к наибольшему значению в диаграмме JS

#javascript #csv #sorting #chart.js #yaxis

Вопрос:

У меня есть этот начальный код, и я пытаюсь выяснить, как я могу отсортировать эти данные от самого высокого к самому низкому. Код может правильно сортировать значения, но метки в 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 /

Ответ №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}
 

После сортировки значения мы выполняем итерацию нового массива данных списка и присваиваем основание метки ключу value.