[英]how to read data from an JSON file and pass it to google chart rows (javascript)
具有以下功能JSONChart(),它從var“ allText”讀取json數據,並且應該能夠解析該數據並將其用作Google圖表的行數據。
注釋掉添加的行部分可以正確顯示帶有空白圖形的列數據。
需要一種從文件中解析給定樣本數據並將其顯示為google圖表中的行數據的方法。
function JSONChart() {
google.charts.load('current', {'packages':['corechart']});
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time stamp');
data.addColumn('number', 'CPU');
data.addColumn('number', 'MEMORY');
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type:'string', role:'annotationText'});
var data1 = JSON.parse(allText);
var dataTableData = google.visualization.arrayToDataTable(data1);
data.addRows (dataTableData);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Set chart options
var options = {'title' : 'CPU & Memory',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Percentage'
},
'width':1400,
'height':600,
curveType: 'function'
};
chart.draw(data, options);
}
window.onload = function() {
google.charts.setOnLoadCallback(JSONChart());
};
樣本JSON傳遞到變量“ allText”中
{"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}
一些東西...
1) arrayToDataTable
需要一個簡單的數組,而不是json對象
它還返回一個完整的數據表,該表已經創建-> data
而是將每個json對象轉換為數組,
然后使用addRows
將數據添加到現有數據表-> data
就像是...
for (var date in data1) {
if (data1.hasOwnProperty(date)) {
chartData.push([
date,
parseFloat(data1[date].MEMORY.replace('%', '').trim()),
parseFloat(data1[date].CPU.replace('%', '').trim()),
data1[date].SCREEN,
'' // not sure what value you want to use here
]);
}
}
data.addRows(chartData);
2) google.charts.load
此語句在調用回調之前等待窗口/文檔加載
不需要-> window.onload = function() {...
google.charts.load
實際上會返回一個承諾,
所以你可以做...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// draw chart code here...
3)將回調函數傳遞給setOnLoadCallback
,
對函數的引用應傳遞-> JSONChart
不是函數的結果-> JSONChart()
(刪除括號)
4)建議與以下工作片段類似的設置...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Time stamp'); data.addColumn('number', 'CPU'); data.addColumn('number', 'MEMORY'); data.addColumn({type:'string', role:'annotation'}); data.addColumn({type:'string', role:'annotationText'}); var chartData = []; var data1 = {"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}}; for (var date in data1) { if (data1.hasOwnProperty(date)) { chartData.push([ date, parseFloat(data1[date].MEMORY.replace('%', '').trim()), parseFloat(data1[date].CPU.replace('%', '').trim()), data1[date].SCREEN, '' // not sure what value you want to use here ]); } } data.addRows(chartData); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); var options = {'title' : 'CPU & Memory', hAxis: { title: 'Time' }, vAxis: { title: 'Percentage' }, height: 600, curveType: 'function' }; chart.draw(data, options); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.