在JSON文件中编写什么以创建多个折线图HTML

Question

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

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

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawBasic);

        function drawChart() {

            var jsonData = $.ajax({
                url: "getData.php",
                dataType: "json",
                async: false
                }).responseText;

            var options = {
              hAxis: {
                    title: 'Time',
                    },
                },
                vAxis: {
                    title: 'Sales',
                    },
                },
                title: 'Today',
                },
                height: 600,
            };
            var data = new google.visualization.DataTable(jsonData);
            var chart = new google.visualization.LineChart(document.getElementById('today'));
            chart.draw(data, options);
            }
    </script>

在getData.php文件中这样写：

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

我希望尽可能使用Google的图表系统。提前非常感谢。

编辑：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}]},
  ]
}

Answer 1

为了直接从json创建Google数据表，如下所示...

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

json数据必须采用非常特定的格式，找到here。

关于特定图表的数据格式，每个都有特定的格式，可以找到折线图的数据格式here。

数据表的第一列代表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-此选项已被弃用。

代替使用done promise方法，该方法将数据作为参数。

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

---

请参阅以下工作片段，在这里，我使用fail promise方法对数据进行硬编码，由于无法从该站点访问您的php页面。在您的服务器上，它应该可以不使用fail方法...

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>