Построить несколько графиков из одного JSON-файла - PullRequest
3 голосов
/ 15 апреля 2019

Эй, друзья по кодированию!

Я пытался построить несколько графиков из одного файла данных. Данные в формате JSON и выглядят так:

[{"wert":"100.5","Datetime":"2019.03.29 08:35:04"}]

Это команда для отображения наборов данных в формате JSON.

print str_replace('\\u0000','', json_encode($data));
print str_replace('\\u0000','', json_encode($data1));

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

Это выглядит так:

[{"wert":"100.5","Datetime":"2019.03.29 08:35:04"}][{"wert1":"10.0","Datetime1":"2019.03.29 08:35:02"}]

С одними данными график отлично работает. Однако я не понял, как адаптировать мой файл JavaScript для работы более чем с одним набором данных.

Я получаю данные из базы данных MySQL. Каждый набор данных имеет разные имена, как показано.

В следующем фрагменте кода вы можете увидеть мой файл JavaScript, который рисует мою диаграмму. Можно нарисовать два графика с одним и тем же набором данных, но не с двумя разными.

Я попытался создать вторую функцию для вторых данных под названием «data1», которая также записана в файле данных, но это не сработало.

$(document).ready(function() {
  $.ajax({
    url: "http://localhost/html_diplo/Data/data3in1.php",
    method: "GET",
    success: function(data) {
      console.log(data);

      var Datetime = [];
      var wert = [];


      for (var i in data) {
        Datetime.push(data[i].Datetime);
        wert.push(data[i].wert);
      }


      var chartdata = {
        labels: Datetime,
        datasets: [{

          label: 'Leistung [W]',
          backgroundColor: 'rgba(000,99,255,0.75)',
          borderColor: 'rgba(000,000,255,0.75)',
          hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
          hoverBorderColor: 'rgba(200, 200, 200, 1)',
          data: wert

        }, {

          label: 'Leistung [W]',
          backgroundColor: 'rgba(000,99,255,0.75)',
          borderColor: 'rgba(000,000,255,0.75)',
          hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
          hoverBorderColor: 'rgba(200, 200, 200, 1)',
          data: wert

        }]


      };


      var ctx = $("#mycanvas");

      var lineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata,

        options: {
          elements: {
            point: {
              radius: 0
            }
          }
        }

      });



    },
    error: function(data) {
      console.log(data);

    }

  });
});

Моя идея заключалась в том, чтобы построить более одного графика на одном графике. Наборы данных должны быть в одном файле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...