2015-04-23 84 views
4

我是新來ZingChart.I我這裏按照本教程 http://www.zingchart.com/docs/features/feeds/#feeds__jsZingCharts養活無法示例代碼來渲染圖

我寫了一個HTML文件ZingFeed.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 
<script> 

var chartData={"refresh":{ 
    "type":"feed", 
    "transport":"js", 
    "url":"feed()", 
    "interval":200 
}; 


window.onload=function(){ 
    zingchart.render({ 
     id:"chartDiv", 
     data:chartData, 
     height:600, 
     width:"100%" 
    }); 
}; 

window.feed = function(callback) { 
    var tick = {}; 
    tick.plot0 = parseInt(10+900*Math.random(), 10); 
    callback(JSON.stringify(tick)); 
}; 

</script> 
<div id='chartDiv'></div> 
</body> 
</html> 

沒有獲取上呈現屏幕。 你的幫助將是非常有益的和高度重視。

回答

4

第一:你正在加載ZingChart庫嗎?我只問,因爲它沒有包含在你的演示中。如果不是,粘貼在我們的文件的<head>

<script src='http://cdn.zingchart.com/zingchart.min.js'></script>

chartData對象也少了一種類型。

您的chartData對象中還有一個缺失的右括號。

下面是一個工作示例。我在ZingChart團隊工作。讓我知道如果我可以幫助別的東西。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="ISO-8859-1"> 
 
    <title>Insert title here</title> 
 
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var chartData = { 
 
     "type":"line", 
 
     "refresh": { 
 
      "type": "feed", 
 
      "transport": "js", 
 
      "url": "feed()", 
 
      "interval": 200 
 
     }, 
 
     "series":[ 
 
      { 
 
       "values":[] 
 
      } 
 
     ] 
 
    }; 
 

 

 
    window.onload = function() { 
 
     zingchart.render({ 
 
      id: "chartDiv", 
 
      data: chartData, 
 
      height: 600, 
 
      width: "100%" 
 
     }); 
 
    }; 
 

 
    window.feed = function(callback) { 
 
     var tick = {}; 
 
     tick.plot0 = parseInt(10 + 900 * Math.random(), 10); 
 
     callback(JSON.stringify(tick)); 
 
    }; 
 
    </script> 
 
    <div id='chartDiv'></div> 
 
</body> 
 

 
</html>

+0

謝謝:)我期待着創造一個活的圖表。數據可能來自其他api.Could你告訴我,我應該尋找。 http://www.zingchart.com/demos/real-time-data-feed-chart/ 我讀過這篇文章,想知道更多關於如何使用ZingCharts的更多信息。 在此先感謝:) –

+0

http://stackoverflow.com/questions/29894115/zing-feed-get-data-from-rest-api 請問你可以看看這個新的疑問,我面臨 Thaks提前。 –