Javascript 用于Google可视化的Json到DataTable错误输出_Javascript_Php_Json_Csv_Google Visualization

Javascript 用于Google可视化的Json到DataTable错误输出

javascript php json csv google-visualization

Javascript 用于Google可视化的Json到DataTable错误输出,javascript,php,json,csv,google-visualization,Javascript,Php,Json,Csv,Google Visualization,我正试图创建一个图表使用谷歌可视化从一个CSV。我已经使用PHP解析了CSV文件，并将所需的数据输出为Json。具体而言，第1列包含格式为“dd/mm/yyyy”的日期，第2列包含格式为2 d.p.的价格，如下所示： [["Date","Close"], ["29\/01\/1985","1,292.62"], ["30\/01\/1985","1,287.88"], ["31\/01\/1985","1,286.77"], ... ["30\/04\/2015","17,840.52"],

我正试图创建一个图表使用谷歌可视化从一个CSV。我已经使用PHP解析了CSV文件，并将所需的数据输出为Json。具体而言，第1列包含格式为“dd/mm/yyyy”的日期，第2列包含格式为2 d.p.的价格，如下所示：

[["Date","Close"],
["29\/01\/1985","1,292.62"],
["30\/01\/1985","1,287.88"],
["31\/01\/1985","1,286.77"],

...

["30\/04\/2015","17,840.52"],
["01\/05\/2015","18,024.06"]]

如上所示，代码包含名为“日期”和“关闭”的标题。我有两个文件，一个包含名为“Json.php”的Json代码，另一个名为“chart.php”，包含通过Ajax调用Json代码的脚本。第二个文件中的代码如下所示：

<html>
<head>
<title>Google Chart</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
<script type='text/javascript'>
      google.load('visualization', '1', {
          'packages': ['annotationchart']
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
          var jsonData = $.ajax({
              url: "json.php",
              dataType: "json",
              async: false
          }).responseText;
          var array  = JSON.parse(jsonData);
          var data = new google.visualization.arrayToDataTable(array);
          var chart = new google.visualization.AnnotationChart(document.getElementById('chart'));
          var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
</script>
</head>
<body>
   <div id="chart" style="width: 900px; height 500px;"></div>
</body>
</html>

出现的情况是，Json代码没有转换为DataTable，而是显示：

[object Object]

我尝试将Json代码直接放入DataTable，而不将其转换为数组，然后使用：

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

输出仍然相同，

[object object]

出现。我返回并将从调用中收到的数据直接放入div中，Json的显示与它应该显示的一样。问题似乎是转换成数据表，我不知道为什么。非常感谢你的任何暗示。谢谢

我想你这里有些问题

当您有

数据类型：“json”

时，

json.parse

是多余的用于将字符串解析为JSON

为了创建注释图表，您需要以

date

和

number

格式定义som数据类型。谷歌无法猜测哪些列和哪些数据是什么。它需要指定列，并根据列数据类型以适当的格式传递数据

JSON中的数据本身格式不正确。无法立即解析日期，数字将被解析为字符串因此，忘记JSON.parse和AnnotationChart能够使用的神奇的JSON->array->适当的数据表吧。改为这样做：

var行，日期，数据=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'Close'）；
对于（var i=1；i
Wow！！工作起来很有魅力。现在对我来说，数据总是必须正确格式化，在本例中是使用javascript循环。非常感谢！！很抱歉再次打扰您。我在JSFIDLE中反复测试了该场景，效果很好。一旦我在本地主机中实现了代码并处理了脚本t、 当图形出现并显示错误“undefined is not a function”（未定义不是函数）时，所有操作都会顺利进行。我尝试删除列标题并放置I=0
而不是I=1
，但什么都没有发生。有什么建议吗？致以最良好的问候！！别担心。问题是var jsonData
无法正确处理。解决方法是先解析它，然后使用var jsonData=JS将数据传递到函数中ON.parse（json）；
var data = new google.visualization.DataTable(jsonData);