使用对象文字表示法时，Google 图表中未出现水平轴标签

Question

Link 到网站：http://tecnicosolarboat.tecnico.ulisboa.pt/boatdata/graficos.html

然后在第一个选择框中选择"Tensão Bateria"，在第二个选择框中选择“5 Horas”。

如您所见，横轴没有刻度。如果你在第一个选择框里选择了"SOC"你就可以比较了。

代码中的注释解释得更好：

function VOLTAGE_chart() {
    var tempo = document.getElementById("janela").value;
    var mysqlData = $.ajax({
        url: "php/voltage_chart.php",
        dataType: "JSON",
        async: false,
        data:{},
        success: function(x){
            return x;   
        }
    }).responseJSON;
    if (mysqlData == null){
        alert("Não há dados a apresentar!");
        return;
    }

    var phpDate = mysqlData[0]["time"].split(/[^0-9]/);
    var date = new Date (phpDate[0],phpDate[1]-1,phpDate[2],phpDate[3],phpDate[4],phpDate[5] );

    var data = google.visualization.arrayToDataTable([
        [{id: 'time', label: 'Time', type: 'date'}, 
         {id: 'voltage', label: 'Voltage', type: 'number'}] 
         // using the above code cause the hAxes thicks to dissapear

      /*['Time', 'Voltage'] 
        [date, parseFloat(mysqlData[0]["Voltage"])]*/ // This works but I need to give the first row out of the for loop so that google chart understands the data type
    ]);

    for (i = 0; i < Object.keys(mysqlData).length; i++) { 
        phpDate = mysqlData[i]["time"].split(/[^0-9]/);
        date = new Date (phpDate[0],phpDate[1]-1,phpDate[2],phpDate[3],phpDate[4],phpDate[5] );
        data.addRows([[date,parseFloat(mysqlData[i]["Voltage"])]]);
    }

    var startDate = new Date( date );
    startDate.setMinutes(date.getMinutes() - tempo);

    var options = {
        title: 'Voltage',
        legend: { position: 'none' },
        vAxes: 
        {0: {title: 'Voltage (V)', viewWindow:{min:34, max:45}, gridlines: {count: 12}, ticks: [34,35,36,37,38,39,40,41,42,43,44,45] } },
        hAxes: {0: {title: 'Time', format:'H:m:s', viewWindow: {min: startDate, max: date}  } },
        pointSize: 5
    };
    var chart = new google.visualization.LineChart(document.getElementById('VOLTAGE_chart'));
    chart.draw(data, options);
}

使用对象字面量表示法：

没有对象字面量表示法（这个是不同的图表，但代码是一样的）：

数据样本：

Answer 1

经过2天的搜索和测试，我发现将"type: 'date'"更改为"type: 'datetime'"解决了问题。

旧代码：

var data = google.visualization.arrayToDataTable([
    [{id: 'time', label: 'Time', type: 'date'}, 
     {id: 'voltage', label: 'Voltage', type: 'number'}]

正确代码：

var data = google.visualization.arrayToDataTable([
    [{id: 'time', label: 'Time', type: 'datetime'}, 
     {id: 'voltage', label: 'Voltage', type: 'number'}]

使用对象文字表示法时，Google 图表中未出现水平轴标签

Horizontal axis labels not appearing in Google charts when using object literal notation

javascript

charts

google-api

google-visualization

object-literal