Блог

Главная - Вопросы по программированию - CanvaJs: 10 первых (отсортированных) элементов в заданном массиве

CanvaJs: 10 первых (отсортированных) элементов в заданном массиве

#javascript #canvasjs

#javascript #canvasjs

Вопрос:

Итак, это моя проблема.

У меня есть диаграмма с столбцами (верхняя диаграмма), и у меня есть огромный список элементов, который не отсортирован. Моя цель — предоставить список элементов диаграмме, которая будет его сортировать, и предоставить мне только первые 10 элементов (отсортированных).

И это краткое изложение кода:

 Array = [[User 1, 25],[User 2, 45],[User 3, 11],etc...]

Я попытался установить максимум на Axis X подобном:

  var chart_top_user = new CanvasJS.Chart("chartContainer_top_user", {
            animationEnabled: true,
            axisX:{
                maximum: 10,
                interval: 1
            },

Но он показывает только первые 10 заданных элементов (несортированных). Может кто-нибудь сказать мне, возможно ли это с Canvajs помощью, или я должен сам сортировать и ограничивать список?

Извините за мой плохой английский. Я старался быть как можно более полным.

Спасибо всем за ваше время 🙂

Ответ №1:

CanvasJS не сортирует точки данных, которые вы ему передаете, он просто отображает в последовательности, которую вы передаете. Вы можете отсортировать его и получить только 10 лучших пользователей, прежде чем переходить к параметрам диаграммы. Проверьте пример ниже.

 var dps = [
  { label: "User 1", y: 610 },
  { label: "User 2", y: 680 },
  { label: "User 3", y: 690 },
  { label: "User 4", y: 700 },
  { label: "User 5", y: 710 },
  { label: "User 6", y: 658 },
  { label: "User 7", y: 734 },
  { label: "User 8", y: 963 },
  { label: "User 9", y: 847 },
  { label: "User 10",  y: 853 },
  { label: "User 11",  y: 869 },
  { label: "User 12",  y: 943 },
  { label: "User 13",  y: 970 },
  { label: "User 14",  y: 869 },
  { label: "User 15",  y: 890 },
  { label: "User 16",  y: 930 },
  { label: "User 17",  y: 850 },
  { label: "User 18",  y: 905 },
  { label: "User 19",  y: 980 },
  { label: "User 20",  y: 858 },
  { label: "User 21",  y: 734 },
  { label: "User 22",  y: 963 },
  { label: "User 23",  y: 847 },
  { label: "User 24",  y: 853 },
  { label: "User 25",  y: 869 },
  { label: "User 26",  y: 943 },
  { label: "User 27",  y: 970 },
  { label: "User 28",  y: 869 },
  { label: "User 29",  y: 890 },
  { label: "User 30",  y: 930 },
  { label: "User 31",  y: 750 }
];

var top10Dps = getHighestValues(dps, 10);
//var top10Dps = dps;

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title:{
    text: "Website Traffic"
  },
  axisY: {
    //includeZero: true
  },
  data: [{
    type: "line",
    dataPoints: top10Dps
  }]
});
chart.render();

function getHighestValues(dps, num){
  var topDps = [...dps].sort((a, b) => b.y - a.y).slice(0, num);
  return topDps;
} 
 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 180px; width: 100%;"></div>

Метки: