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);
}
没有对象的文字符号(这一个是不同的图表,但是代码是相同的):
样本数据: