Динамическое использование массива для заполнения вывода данных для гистограммы в javascript

Question

Я пытаюсь создать гистограмму с использованием диаграммы. js javascript библиотека. В настоящее время у меня есть массив в javascript, который содержит следующее:

0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"}
1: {labels: "01/01/2020 00:00:00", data: 774, category: "B"}
2: {labels: "01/01/2020 00:00:00", data: 5993, category: "C"}
3: {labels: "30/01/2020 00:00:00", data: 7624, category: "A"}
4: {labels: "30/01/2020 00:00:00", data: 900, category: "B"}
5: {labels: "30/01/2020 00:00:00", data: 5865, category: "C"}
6: {labels: "18/02/2020 00:00:00", data: 7161, category: "A"}
7: {labels: "18/02/2020 00:00:00", data: 1005, category: "B"}
8: {labels: "18/02/2020 00:00:00", data: 5940, category: "C"}

Ниже приведен запрос AJAX для помещения данных в массив, и теперь мне нужно динамически установить данные для вывода стека chart

 // STACK BAR CHART
var stackBarData = [];
var stackBarLabels = [];

$.ajax({
    type: "POST",
    async: false,
    url: "ExecView.aspx/ReturnStackBarData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var stackbarDatas = data.d;
        stackBarData = new Array(stackbarDatas.length);

        console.log(stackBarData);

        for (i = 0; i < stackbarDatas.length; i++) {

            stackBarData[i] = { labels: stackbarDatas[i].label, data: stackbarDatas[i].data, category: stackbarDatas[i].category };
        }

        console.log(stackBarData); // ARRAY OUTPUT ABOVE




    }
});


var BarpopData = {
    datasets: [{
        data: stackBarData
    }],



};

Я ожидаю, что все данные в массиве с 01/01/20 будут моей первой меткой на оси X, а категория A будет самым низким стеком с данными 7433. Затем я ожидаю категорию B будет средний стек с данными 774. Затем я ожидаю, что категория C будет самым высоким стеком с данными 5933. Я ожидаю, что еще один стек будет с датой 30/01/2020.

Мне нужно, чтобы это было Dynami c смотрит на массив, поскольку данные всегда меняются.

Как я могу динамически это сделать - чтобы обеспечить минимальную и максимальную ось Y автоматически, а значит, показывает хороший столбчатый график?

I есть JS Fiddle: https://jsfiddle.net/1eq8w0Lx/ того, что я ожидаю, что результат будет выглядеть. Мне нужно, чтобы жестко закодированные значения были динамическими c из моего массива. Как мне добиться этого результата?

Answer 1

Прежде всего, отсортируйте данные, чтобы убедиться, что они в правильном порядке:

const priority = ['A', 'B', 'C']
data.sort((a, b) => {
  const aDate = new Date(a.labels).getTime()
  const bDate = new Date(b.labels).getTime()
  if (aDate === bDate) {
    return priority.indexOf(a.category) - priority.indexOf(b.category)
  }
  return aDate - bDate
})

labels легко получить:

const labels = [...new Set(data.map(el => el.labels.slice(0, -9)))]

Что касается datasets, его порядок должен совпадать с массивом priority:

const datasets = priority.map(p => ({ label: p, data: [] }))
for (const d of data) {
  const index = priority.indexOf(d.category)
  datasets[index].data.push(d.data)
}

Answer 2

Вы можете найти рабочий пример здесь https://jsfiddle.net/k9j6h3tc/2/

Суть:

1. Настройте свой график. Данные могут быть пустыми.

   const myChart = new Chart(document.getElementById("myChart"), {
     type: 'bar',
     data: {
       labels  : [],
       datasets: [
         {
           label          : 'A',
           data           : [],
           backgroundColor: [ ... ],
           borderColor    : [ ... ],
           borderWidth    : 2
         },
         {
           label          : 'B',
           data           : [],
           backgroundColor: [ ... ],
           borderColor    : [ ... ],
           borderWidth    : 2
         },
         {
           label          : 'C',
           data           : [],
           backgroundColor: [ ... ],
           borderColor    : [ ... ],
           borderWidth    : 2
         },
       ],
     },
     options: { ... }
   })
   

2. $.ajax обратный вызов может выглядеть следующим образом:

   function on_success(data) {
   myChart.data.labels = [...new Set(data.map(el => el.labels.slice(0,-9)))];
     ["A", "B", "C"].forEach((cat, idx) => {
       myChart.data.datasets[idx].data,
       data.filter(el => el.category === cat).map(el => el.data)
     });
     myChart.update();
   }
   

3. Не пересоздавать диаграмму. Используйте myChart.update().

Answer 3

Со ссылкой на вашу ссылку jsfiddle я изменил ваш ajax метод успеха logi c. может это поможет вам достичь желаемого результата

success: function (data) {
    var stackbarDatas = data.d;
    stackBarData = new Array(stackbarDatas.length);

    var dataSet = stackbarDatas.map(x=>({label: x.category, data: [x.data]}))
    var labels = stackbarDatas.map(x=>(x.label))

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
                                   type: 'bar',
                                   data: {
                                           labels: labels ,
                                           datasets: dataSet,
                                           options: {
                                                  ...
                                                  //rest settings as it is
}

Answer 4

var stackbarDatas = data.d;
        stackBarData = new Array(stackbarDatas.length);

        stackBarData = stackbarDatas.map(x => ({ category: x.category, data: [x.data], backgroundColor: x.backgroundColor, borderColor: x.borderColor, borderWidth: x.borderWidth }))
        stackBarLabels = stackbarDatas.map(x => (x.label))

        uniqueLabels = stackBarLabels.filter((v, i, a) => a.indexOf(v) === i); 


        console.log(JSON.stringify(stackBarData));


        stackBarData.forEach(d => {
            var categoryName = d.category;
            if (!groups[d.category]) {
                groups[d.category] = {
                    label: d.category,
                    data: [],
                    backgroundColor: [],
                    borderColor: [],
                    borderWidth: d.borderWidth
                };
            }
            groups[d.category].data.push(d.data[0]);
            groups[d.category].backgroundColor.push(d.backgroundColor);
            groups[d.category].borderColor.push(d.borderColor);
        });

        stackBarData = Object.values(groups);