javascript - 我如何让这个 json 被谷歌图表识别

Question

我一直在努力弄清楚为什么 google charts 不会在折线图中绘制此 JSON 数据

我已经搜索了互联网但找不到答案，所以现在请大佬...

从加载到 PHP 数组中的 .CSV 文件大批( [0] => 数组 ( [时间] => 16:37:36 [值(value)] => 27.1 )

[1] => Array
    (
        [Time] => 16:42:05
        [Value] => 27.0
    )

等等

然后在 JS 中转换成 json 格式给我这个var ar = [{"时间":"16:37:36","值":27.1},{"时间":"16:42:05","值":27}等

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

data.addColumn('string', 'Time');
    data.addColumn('number', 'Value');       
data.addRows(ar);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 200});

当我运行脚本时，我得到的只是一个没有任何绘图数据的基本图表，只有一个空的标线任何指针将不胜感激

Answer 1

您的数组需要更改为:

var ar = [{"Time":"16:37:36","Value":27.1},{"Time":"16:42:05","Value":27} etc

到(删除'{'、'"Time":' 和'"Value":')

["16:37:36",27.1],["16:42:05",27] ,etc

对于您的 Google 折线图，请参见下面的示例

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

function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Time');
      data.addColumn('number', 'Value');

      data.addRows([
        ["16:37:36", 27.1],    ["16:42:05", 27],   ["16:44", 23],  ["16:46", 17.0],   ["16:51", 18],  ["16:54", 9]
      ]);

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Hits'
        },
        series: {
          1: {curveType: 'function'}
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

https://jsfiddle.net/api/post/library/pure/