javascript - 从一个 JSON 文件绘制多个图形

Question

嘿，编码朋友！

我试图从一个数据文件中绘制多个图表。数据为 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);

    }

  });
});

我的想法是在一张图表中绘制多个图表。数据集应该在一个文件中。

标签： javascriptjqueryjsonajaxchart.js