在 JSON 文件中写入什么来创建多折线图 HTML

我是 javascript 新手，所以请原谅我。我正在尝试制作一个折线图（有 4 条线），每小时更新一次。这些信息可以在 JSON 文件中找到，但我不确定如何编写它。以前我曾尝试使用data.addColumn() and data.addRows()但我找不到将其与 JSON 文件连接的方法。假设您要举个例子，请显示四种不同商品的销售数量

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

        google.charts.load('current', {
        packages: ['corechart']
        }).then(function () {

        var options = {
            hAxis: {
            title: 'Time'
            },
            vAxis: {
            title: 'Sales'
            },
            title: 'Today',
            height: 600
        };

        var chart = new google.visualization.LineChart(document.getElementById('dagens'));

        var jsonData = $.ajax({
            url: 'getData.php',
            dataType: 'json',
        })

            drawChart(jsonData);

        }).done(drawChart);


        function drawChart(jsonData) {
            var data = new google.visualization.DataTable(jsonData);
            chart.draw(data, options);
        }

    </script>

在 getData.php 文件中这样写：

$string = file_get_contents("sampleData.json");
echo $string;

如果可能的话，我希望使用谷歌的图表系统。提前谢谢了。

编辑： JSON 文件：

{
  cols: [{label: 'Time', type: 'number'},
         {label: 'Sales 1', type: 'number'},
         {label: 'Sales 2', type: 'number'},
     {label: 'Sales 3', type: 'number'},
     {label: 'Sales 4', type: 'number'}
  ],
  rows: [
     {c:[{v: 0}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 1}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 2}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 3}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 4}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 5}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 6}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 7}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 8}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 9}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 10}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 11}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 12}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 13}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 14}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 15}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 16}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 17}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 18}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 19}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 20}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 21}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 22}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]},
     {c:[{v: 23}, {v: 1000}, {v: 1000}, {v: 1000}, {v: 1000}]}
  ]
}

为了直接从json创建一个google数据表，如下......

var data = new google.visualization.DataTable(jsonData);

json数据必须是非常特定的格式，发现here https://developers.google.com/chart/interactive/docs/reference#dataparam.

至于特定图表的数据格式，
每个都有特定的格式，折线图的数据格式可以找到here https://developers.google.com/chart/interactive/docs/gallery/linechart#data-format.

数据表中的第一列代表x轴，
它可以是任何类型（日期、数字、字符串等）。

以下各列均应为数字，
代表图表中的每个系列或要绘制的线条。

绘制折线图所需的 json 示例，
x 轴上有日期，
四行如下......

var jsonData = {
  "cols": [
    {"label": "Date", "type": "date"},
    {"label": "Sales A", "type": "number"},
    {"label": "Sales B", "type": "number"},
    {"label": "Sales C", "type": "number"},
    {"label": "Sales D", "type": "number"}
  ],
  "rows": [
    {"c":[{"v": "Date(2019, 10, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
    {"c":[{"v": "Date(2019, 11, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
    {"c":[{"v": "Date(2020, 0, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
    {"c":[{"v": "Date(2020, 1, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]}
  ]
};

使用ajax获取json数据时，
不要使用-->async: false-- 此选项已被弃用。

而是使用donePromise 方法，它将数据作为参数。

$.ajax({
  url: "getData.php",
  dataType: "json",
}).done(function (jsonData) {  // <-- json data argument
});

请参阅以下工作片段，
在这里，我使用failPromise 方法对数据进行硬编码，
因为您的 php 页面无法从该站点访问。
在你的服务器上，它应该可以在没有失败方法的情况下工作......

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Sales'
    },
    title: 'Today',
    height: 600
  };

  var chart = new google.visualization.LineChart(document.getElementById('today'));

  $.ajax({
    url: 'getData.php',
    dataType: 'json',
  }).fail(function () {

    var jsonData = {
      "cols": [
        {"label": "Date", "type": "date"},
        {"label": "Sales A", "type": "number"},
        {"label": "Sales B", "type": "number"},
        {"label": "Sales C", "type": "number"},
        {"label": "Sales D", "type": "number"}
      ],
      "rows": [
        {"c":[{"v": "Date(2019, 10, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
        {"c":[{"v": "Date(2019, 11, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
        {"c":[{"v": "Date(2020, 0, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]},
        {"c":[{"v": "Date(2020, 1, 1)"}, {"v": 1000}, {"v": 2000}, {"v": 3000}, {"v": 4000}]}
      ]
    };

    drawChart(jsonData);

  }).done(drawChart);


  function drawChart(jsonData) {
    var data = new google.visualization.DataTable(jsonData);
    chart.draw(data, options);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="today"></div>

EDIT

ajax调用有问题。
改变从...

    var jsonData = $.ajax({
        url: 'getData.php',
        dataType: 'json',
    })

        drawChart(jsonData);

    }).done(drawChart);

改成...

    $.ajax({
        url: 'getData.php',
        dataType: 'json',
    }).done(drawChart);

另外，您似乎缺少加载语句承诺的右括号。
试试这个代码...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Sales'
    },
    title: 'Today',
    height: 600
  };

  var chart = new google.visualization.LineChart(document.getElementById('dagens'));

  $.ajax({
    url: 'getData.php',
    dataType: 'json',
  }).done(drawChart);


  function drawChart(jsonData) {
    var data = new google.visualization.DataTable(jsonData);
    chart.draw(data, options);
  }

});