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);

    }

  });
});

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

从一个JSON文件绘制多个图

0 个答案: