使用epoch.js實時生成圖表
[英]Real Time Chart Generation using epoch.js
問題描述
我正在嘗試使用epoch.js創建一個簡單的實時圖表，該圖表會在click事件中進行更新。
我下面發布的代碼共有3個功能。 他們是：
1）產生一個隨機值
2）生成當前日期和時間（以毫秒為單位）。
3）onclick事件，用於更新圖表數據點。
雖然我具有圖表所需的正確格式的數據點。 我無法更新它。
感謝您找出有關圖表為何無法正常運行的任何幫助。
///////////////this function generates the date and time in milliseconds////////// function getTimeValue() { var dateBuffer = new Date(); var Time = dateBuffer.getTime(); return Time; } ////////////// this function generates a random value //////////////////////////// function getRandomValue() { var randomValue = Math.random() * 100; return randomValue; } ////////////// this function is used to update the chart values /////////////// function updateGraph() { var newBarChartData = [{ label: "Series 1", values: [{ time: getTimeValue(), y: getRandomValue() }] }, ]; barChartInstance.push(newBarChartData); } ////////////// real time graph generation//////////////////////////////////////// var barChartData = [{ label: "Series 1", values: [{ time: getTimeValue(), y: getRandomValue() }] }, ]; var barChartInstance = $('#barChart').epoch({ type: 'time.bar', axes: ['right', 'bottom', 'left'], data: barChartData });
<head> <script src="https://code.jquery.com/jquery-1.11.3.js"> </script> <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js"> </script> <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css"> </head> <div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div> <p id="updateMessage" onclick="updateGraph()">click me to update chart</p>
1 個解決方案
解決方案1
2 已采納 2015-10-21 10:40:23
更新圖形時，您將錯誤的對象推入barChartInstance 。 您只需要推送包含新數據點的陣列，而不是再次推送完整配置即可。
function updateGraph() {
var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}];
/* Wrong: don't use the full configuration for an update.
var newBarChartData = [{
label: "Series 1",
values: [{
time: getTimeValue(),
y: getRandomValue()
}]
}, ];
*/
barChartInstance.push(newBarChartData);
}
///////////////this function generates the date and time in milliseconds////////// function getTimeValue() { var dateBuffer = new Date(); var Time = dateBuffer.getTime(); return Time; } ////////////// this function generates a random value //////////////////////////// function getRandomValue() { var randomValue = Math.random() * 100; return randomValue; } ////////////// this function is used to update the chart values /////////////// function updateGraph() { var newBarChartData = [{time: getTimeValue(), y:getRandomValue()}]; /* var newBarChartData = [{ label: "Series 1", values: [{ time: getTimeValue(), y: getRandomValue() }] }, ]; */ barChartInstance.push(newBarChartData); } ////////////// real time graph generation//////////////////////////////////////// var barChartData = [{ label: "Series 1", values: [{ time: getTimeValue(), y: getRandomValue() }] }, ]; var barChartInstance = $('#barChart').epoch({ type: 'time.bar', axes: ['right', 'bottom', 'left'], data: barChartData });
<head> <script src="https://code.jquery.com/jquery-1.11.3.js"> </script> <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/d3.min.js"> </script> <script src="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.goldhillcoldtouch.co.uk/wp-content/uploads/epoch.min.css"> </head> <div id="barChart" class="epoch category10" style="width:320px; height: 240px;"></div> <p id="updateMessage" onclick="updateGraph()">click me to update chart</p>
epoch.js圖表的線條如何着色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.