Question

我有一个crontab作业，每天更新一个文件，然后包含：

日期（年份，月份，数字）
当月运行的测试次数

我希望能够在网页上以图形方式显示此信息。似乎Google Charts与json一起应该可以做到这一点，但到目前为止，我只是在尝试这个时得到一个空白页。

我不知道是否有一种标准的方法（工具或过程）来调试这些工具的问题 - 如果有，请告诉我:-)。 与此同时，我试图通过将任务分解为更小的组成部分来缩小问题范围。每个看起来都很好，但组合不起作用。

这是完全没有产生任何内容的html页面:(主要基于https://developers.google.com/chart/interactive/docs/php_example中的示例）

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "/mypath/gtest_usage.json",
          dataType: "json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from data file.
      var data = new google.visualization.DataTable(jsonData);
      data.addColumn('date', 'Month');
      data.addColumn('number', 'Tests per Month');

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, {height: 600});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the chart-->
    <div id="chart_div"></div>
  </body>
</html>

其中/mypath / gtest_usage.json的内容为：

{
 "cols":[
   {"type":"datetime"},{"type":"number"}
  ],
 "rows":[
   {"c":[{"v":"Date(2015, 3)"},{"v":10}]},
   {"c":[{"v":"Date(2015, 5)"},{"v":20}]},
   {"c":[{"v":"Date(2015, 8)"},{"v":14}]},
   {"c":[{"v":"Date(2016, 3)"},{"v":30}]},
   {"c":[{"v":"Date(2016, 5)"},{"v":17}]}
 ]
}

上面的json文件的格式基于例如sending JSON dates to google charts API from Perl

我尝试了什么，以缩小问题范围：

第1步：不要在json数据中使用单独的文件 - 只需对其进行硬编码;这个DOES画了一个图表，这表明基本的html文件等没问题，只是外部数据在某种程度上无效或不符合我的html文件的要求：

var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', 'Tests per Month');
data.addRows([
  [ new Date (2015, 3), 10],
  [ new Date (2015, 5), 20],
  [ new Date (2015, 8), 14],
  [ new Date (2016, 3), 30],
  [ new Date (2016, 5), 17]
]);

第2步：使用以下方法检查我的json文件语法的有效性： http://jsonlint.com/ - 它说语法很好。

第3步：改变我如何定义列数据。我见过例如列数据未在html文件中定义，仅来自json文件。也许我在html中的列定义与json定义不匹配，所以我尝试过：

删除我的html文件中的数据addColumn行，并仅使用json 内容
删除json文件中的cols定义并仅使用 html文件中的内容。

这些都没有任何区别 - 仍然是空白。

第4步：根据其他用户在StackOverflow和其他地方发布的经验，我检查了json内容中的常见错误，例如预期类型与数据提供值不匹配（例如，将其指定为数字，但在引号中提供它以使其成为字符串）。

我可能距离在这里有一个有效的解决方案还有很长的路要走 - 或者说非常接近 - 由于缺乏诊断，错误消息等等，我无法分辨。你们看到我的方法出了什么问题吗？你知道任何机制等可以帮助像我这样的新手得到一个实际的错误信息或其他这样的诊断，可以帮助我看到我做错了吗？

提前感谢您可以解决的任何问题。

Answer 1

json数据看起来有效且在这里工作正常，你可能想要添加列标签......

{"type":"datetime", "label": "Date"},{"type":"number", "label":"Amount"}

使用json创建DataTable时，不需要data.addColumn

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = {
   "cols":[
     {"type":"datetime"},{"type":"number"}
    ],
   "rows":[
     {"c":[{"v":"Date(2015, 3)"},{"v":10}]},
     {"c":[{"v":"Date(2015, 5)"},{"v":20}]},
     {"c":[{"v":"Date(2015, 8)"},{"v":14}]},
     {"c":[{"v":"Date(2016, 3)"},{"v":30}]},
     {"c":[{"v":"Date(2016, 5)"},{"v":17}]}
   ]
  };
  var data = new google.visualization.DataTable(jsonData);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {height: 600});
}

＆＃13;

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

＆＃13;

编辑

并使用async: false

推荐不

并使用success和error处理程序，如下所示......

function drawChart() {
  $.ajax({
    url: 'getdata.php',
    data: '/mypath/gtest_usage.json',
    dataType: 'json',
    success: function (jsonData) {
      var data = new google.visualization.DataTable(jsonData);
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, {height: 600});
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(errorThrown + ': ' + textStatus);
    }
  });
}

当我使用json数据时，Google Chart是空白的

1 个答案: