[英]Google charts linechart showing only a dot instead of a line when using JSON input
我試圖用來自JSON的數據填充折線圖。
它應該是這樣的: https : //jsfiddle.net/ud5y3m3y/
現在,當我切換到JSON時,它在圖表上僅給我一個點: https : //jsfiddle.net/5at6w6en/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var JSONinput = {"rows":[{"c":[{"v":[13,26,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,26,45]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,27,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,27,45]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0},{"v":[13,28,15]},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0}]}],"cols":[{"id":"","label":"Time of Day","type":"timeofday"},{"id":"","label":"Somevalue 1","type":"number"},{"id":"","label":"Somevalue 2","type":"number"},{"id":"","label":"Somevalue 3","type":"number"},{"id":"","label":"Somevalue 4","type":"number"},{"id":"","label":"Somevalue 5","type":"number"}]};
var data = new google.visualization.DataTable(JSONinput);
var options = {
title: 'History of somevalues',
width: 900,
height: 500,
hAxis: {
format: 'HH:mm:ss',
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0,
viewWindowMode: "explicit",
viewWindow: {min: 0}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
我已經閱讀過https://developers.google.com/chart/interactive/docs/datesandtimes
還有這個https://developers.google.com/chart/interactive/docs/reference
但是還沒有找出問題所在。 通常,當數據表的輸入中存在某種錯字時,就會出現點問題。
任何幫助表示贊賞!
我不好
生成JSON的代碼存在錯誤。
它沒有在每行中添加“ c”數組。
這是正確的JSON
{
"cols": [
{"id":"","label":"Time of Day","type":"timeofday"},
{"id":"","label":"Somevalue 1","type":"number"},
{"id":"","label":"Somevalue 2","type":"number"},
{"id":"","label":"Somevalue 3","type":"number"},
{"id":"","label":"Somevalue 4","type":"number"},
{"id":"","label":"Somevalue 5","type":"number"}
],
"rows": [
{"c":[{"v":[13,26,15]},{"v":10},{"v":20},{"v":30},{"v":40},{"v":50}]},
{"c":[{"v":[13,26,45]},{"v":10},{"v":200},{"v":300},{"v":400},{"v":500}]},
{"c":[{"v":[13,27,15]},{"v":30},{"v":20},{"v":70},{"v":40},{"v":60}]},
{"c":[{"v":[13,27,45]},{"v":10},{"v":70},{"v":60},{"v":40},{"v":80}]},
{"c":[{"v":[13,28,15]},{"v":50},{"v":60},{"v":60},{"v":70},{"v":50}]}
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.