Google Chart 2行数据数量不一样

时间:2016-02-02 13:06:17

标签: javascript charts google-visualization lines

我正在尝试创建一个动态的Google Chart系列。 我在一天的范围内(从00h00到23h50 - 0am到12pm)有2条线,每10分钟(00h00,00h10,000h等等)每条线都有一个点。 因此,对于每一行,我每天有144个值(1 * 6 * 24 - 6 /小时,因为我每10分钟有1个)。 对于第一行,我在一天开始时拥有所有值(144个值),但对于另一个,我按照当前小时绘制它(例如,如果它是01:00 - 凌晨1点,我只有6个值)。

所以我正在尝试绘制线条,但如果我的secondes线条没有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");
});

这是生成数据的函数(它们当前是随机生成的,但我稍后会从DB中获取它们)

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;
}

所以基本上我会有类似的东西:

Google chart

但如果我将secondes线值设置为“”,则表示

  

错误:类型不匹配。值与列索引2中的类型编号不匹配

有没有人知道如果我没有它,如何绕过seconde线的值?

1 个答案:

答案 0 :(得分:3)

对于没有任何数据的点,请使用null而不是空字符串""