0

链接到网站时,在谷歌的图表没有出现:http://tecnicosolarboat.tecnico.ulisboa.pt/boatdata/graficos.html水平轴标签使用对象的文字符号

然后在第一选择框中选择“TensãoBateria”,并在第二个选择“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); 
} 

随着对象的文字符号: with object literal

没有对象的文字符号(这一个是不同的图表,但是代码是相同的): Without object literal notation:

样本数据:

enter image description here

回答

0

经过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'}]