Google Chart 2 Lines with not the same number of data
Google Chart 2 Lines with not the same number of data
我正在尝试创建动态 Google 图表线。
我在一天的范围内有 2 条线(从 00h00 到 23h50 - 0am 到 12pm)每 10 分钟(00h00、00h10、00h20 等...)每条线有一个点。
因此,对于每一行,我一天有 144 个值(1 * 6 * 24 - 6 / 小时,因为我每 10 分钟有 1 个)。
对于第一行,我有一天开始时的所有值(144 个值),但对于另一行,我根据当前时间绘制它(例如,如果它是 01:00 - 凌晨 1 点,我只有6 个值)。
所以我正在尝试画线,但如果我的辅助线没有 144 个值,我会遇到问题。
这是用不同的线绘制图表的函数
function drawChart(chart_div) {
var data = get_data();
var chart = new google.visualization.ComboChart(document.getElementById(chart_div));
chart.draw(data, {
height: 300,
width: 1000,
chartArea:{left:40,top:5,width:"100%",height:"80%"},
seriesType: 'line',
series: {
0: {
color: '#0080FF'
},
1: {
color: '#bdbdbd',
enableInteractivity: false
}
},
tooltip: {
isHtml: true
},
legend: {
position: 'none'
},
vAxis: {
gridlines: {
color: '#e5e5e1'
}
},
hAxis: {
viewWindow: {
min: 0,
max: 144
},
ticks: [0, 24, 48, 72, 96, 120, 144] // display labels every 24
}
});}
这是启动绘制图表功能的代码
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(function() {
drawChart("chart_one");
});
这里是生成数据的函数(它们目前是随机生成的,但我稍后会从数据库中获取它们)
function get_data(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Heartbeat (%)');
data.addColumn('number', 'Heartbeat moy (%)');
var total = 0;
for(i = 0; i < 24; i++){
for(j=0; j <= 5; j++){
var num = "";
if(i < 10){
num += "0";
}
if(total < 98){
data.addRows([[num + i + "h"+j+"0", Math.floor((Math.random() * 10) + 91), Math.floor((Math.random() * 10) + 91)]]);
} else {
data.addRows([[num + i + "h"+j+"0", "", Math.floor((Math.random() * 10) + 91)]]);
}
total++;
}
}
return data;
}
所以基本上我会有类似的东西:
但是如果我将秒行值设置为“”,它会说
Error: Type mismatch. Value does not match type number in column index 2
有没有人知道如何绕过第二行的值(如果我没有)?
对于没有任何数据的点,使用 null
而不是空字符串 ""
我正在尝试创建动态 Google 图表线。 我在一天的范围内有 2 条线(从 00h00 到 23h50 - 0am 到 12pm)每 10 分钟(00h00、00h10、00h20 等...)每条线有一个点。 因此,对于每一行,我一天有 144 个值(1 * 6 * 24 - 6 / 小时,因为我每 10 分钟有 1 个)。 对于第一行,我有一天开始时的所有值(144 个值),但对于另一行,我根据当前时间绘制它(例如,如果它是 01:00 - 凌晨 1 点,我只有6 个值)。
所以我正在尝试画线,但如果我的辅助线没有 144 个值,我会遇到问题。
这是用不同的线绘制图表的函数
function drawChart(chart_div) {
var data = get_data();
var chart = new google.visualization.ComboChart(document.getElementById(chart_div));
chart.draw(data, {
height: 300,
width: 1000,
chartArea:{left:40,top:5,width:"100%",height:"80%"},
seriesType: 'line',
series: {
0: {
color: '#0080FF'
},
1: {
color: '#bdbdbd',
enableInteractivity: false
}
},
tooltip: {
isHtml: true
},
legend: {
position: 'none'
},
vAxis: {
gridlines: {
color: '#e5e5e1'
}
},
hAxis: {
viewWindow: {
min: 0,
max: 144
},
ticks: [0, 24, 48, 72, 96, 120, 144] // display labels every 24
}
});}
这是启动绘制图表功能的代码
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(function() {
drawChart("chart_one");
});
这里是生成数据的函数(它们目前是随机生成的,但我稍后会从数据库中获取它们)
function get_data(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Heartbeat (%)');
data.addColumn('number', 'Heartbeat moy (%)');
var total = 0;
for(i = 0; i < 24; i++){
for(j=0; j <= 5; j++){
var num = "";
if(i < 10){
num += "0";
}
if(total < 98){
data.addRows([[num + i + "h"+j+"0", Math.floor((Math.random() * 10) + 91), Math.floor((Math.random() * 10) + 91)]]);
} else {
data.addRows([[num + i + "h"+j+"0", "", Math.floor((Math.random() * 10) + 91)]]);
}
total++;
}
}
return data;
}
所以基本上我会有类似的东西:
但是如果我将秒行值设置为“”,它会说
Error: Type mismatch. Value does not match type number in column index 2
有没有人知道如何绕过第二行的值(如果我没有)?
对于没有任何数据的点,使用 null
而不是空字符串 ""