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

【问题标题】：What to write in JSON file to create multiple line chart HTML在 JSON 文件中写什么来创建多折线图 HTML
【发布时间】：2020-02-06 13:18:59
【问题描述】：

我是 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 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}]}
  ]
}

【问题讨论】：

你也可以发布 jsonData 的数据吗
我已经添加了 JSON 文件

标签： javascript json charts google-visualization linechart

【解决方案1】：

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

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

请参阅以下工作 sn-p，
在这里，我使用fail promise 方法对数据进行硬编码，
因为无法从此站点访问您的 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>

编辑

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

});

【讨论】：

感谢这帮了大忙。但是，我仍然不确定一件事。你写的失败函数，如果我的 JSON 文件无法读取，这只会显示吗？我仍然无法从 JSON 文件中检索任何数据，并且我相信我已经正确编写了它。
好的，编辑后显示我当前的版本。编辑：另外，您的示例向我展示了如何检查特定日期的值。我希望看到每小时的销售图表。
至于小时，您可以使用示例中的数字，或者您可以在我的示例中为日期添加小时 --> "Date(2020, 0, 1, 1)" -- 或者您甚至可以使用其他类型 --> "timeofday" -- 这是一个包含 3 个数字的数组，分别代表小时、分钟、秒 --> [1, 0, 0]
还是不行。我不知道这是否重要，但我正在尝试在我的网络浏览器中运行代码，也从 http-server 运行代码。所有文件当前都位于我的桌面上。
嗯，好像有两个错误。 “从源'null'访问文件：///C：/.../getData.php 处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-扩展名，https。” AND "GET file:///C:/.../getData.php net::ERR_FAILED"