2017-03-17 30 views
0

我正在尝试创建每分钟价格更改的折线图。我需要能够从我的网站上获取数据。如果我使用datetime作为x轴,我无法加载图表。导入日期时间时无法创建Google图表

<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: "sampleData.json", 
      dataType: "json", 
      async: false 
      }).responseText; 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

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

    </script> 
    </head> 

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

我可以利用创建图表sampleData.json如下:

{ 
    "cols": [ 
     {"id":"","label":"X","pattern":"","type":"string"}, 
     {"id":"","label":"Line 1","pattern":"","type":"number"}, 
     {"id":"","label":"Line 2","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"1","f":null},{"v":3,"f":null},{"v":4,"f":null}]}, 
     {"c":[{"v":"2","f":null},{"v":1,"f":null},{"v":2,"f":null}]}, 
     {"c":[{"v":"3","f":null},{"v":1,"f":null},{"v":3,"f":null}]}, 
     {"c":[{"v":"4","f":null},{"v":1,"f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"5","f":null},{"v":2,"f":null},{"v":5,"f":null}]} 
     ] 
} 

但是当我尝试X为datetime改变,它不会加载。

{ 
    "cols": [ 
     {"id":"","label":"X","pattern":"","type":"datetime"}, 
     {"id":"","label":"Line 1","pattern":"","type":"number"}, 
     {"id":"","label":"Line 2","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":new Date(2017,0,1,12,1),"f":null},{"v":3,"f":null},{"v":4,"f":null}]}, 
     {"c":[{"v":new Date(2017,0,1,12,2),"f":null},{"v":1,"f":null},{"v":2,"f":null}]}, 
     {"c":[{"v":new Date(2017,0,1,12,3),"f":null},{"v":1,"f":null},{"v":3,"f":null}]}, 
     {"c":[{"v":new Date(2017,0,1,12,4),"f":null},{"v":1,"f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":new Date(2017,0,1,12,5),"f":null},{"v":2,"f":null},{"v":5,"f":null}]} 
     ] 
} 

回答

0

您应该在使用JSON时删除新关键字。

从谷歌图表: https://developers.google.com/chart/interactive/docs/datesandtimes

“当序列使用JavaScript的DataTable数据对象的文字符号,以建立自己的数据表,新的Date()构造不能用相反,谷歌图表提供了一个日期字符串表示允许你的日期或日期时间在创建DataTable时被正确地序列化和解析,这个日期字符串格式简单地删除了新的关键字,并将剩余的表达式用引号括起来:

“Date(Year,Month,Day,Hours,Minutes ,秒,毫秒)“