问题描述
第三天,我正在尝试从json获取数据,而Google时间轴图表没有错误.我认为应该可以,但是出现错误<text> attribute x: Expected length, "NaN".
Third day I'm trying to get data from json without errors with google timeline chart. I thought it should worked, but i've got an error <text> attribute x: Expected length, "NaN".
部分<g><text text-anchor="middle" x="NaN" y="21.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#000000"> </text></g>
我的图表带有对数据的Ajax调用:
There is my chart with ajax-call to data:
var data = [];
$.ajax({
url: "/api/reports/6/linestatus",
dataType: "json",
success: function (jsonData) {
for (var i = 0; i < jsonData.length; i++) {
startTime = new Date(jsonData[i].dateStart);
startHours = startTime.getHours();
startMinutes = startTime.getMinutes();
startSeconds = startTime.getSeconds();
endTime = new Date(jsonData[i].dateEnd);
endHours = endTime.getHours();
endMinutes = endTime.getMinutes();
endSeconds = endTime.getSeconds();
console.log(data);
data.push(
[jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(0, 0, 0, startHours, startMinutes, startSeconds), new Date(0, 0, 0, endHours, endMinutes, endSeconds)]
);
}
}
})
dataTable.addRows(data);
我的JSON数据:
[{
"lineId": 6,
"lineName": "Line 1",
"status": 2,
"dateStart": "2017-08-03T15:10:20.42",
"dateEnd": "2017-08-03T15:10:23.353"
}]
很抱歉,有很多代码. = \谢谢.
Sorry for much code. =\Thank you.
推荐答案
注释中的小提琴两件事
(1)循环中的语法无效
数组
(1) the syntax in the loop is invalid
nothing is being done with the array
for (var i = 0; i < 2; i++){
[ 'Washington', new Date(), new Date() ], // <-- ??
}
需要使用addRow
之类的
for (var i = 0; i < 2; i++){
dataTable.addRow([ 'Washington', new Date(), new Date() ]);
}
(2)可能是一个错误,但是如果所有行的开始日期和结束日期都相等,
图表将引发错误
(2) it may be a bug but if all the rows have equal start and end dates,
the chart will throw an error
// dates have close if not equal times
dataTable.addRow([ 'Washington', new Date(), new Date() ]);
请参阅以下工作片段,
添加了addRow
并修改了开始日期...
see following working snippet,
added addRow
and modified start date...
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
for (var i = 0; i < 2; i++) {
dataTable.addRow([
'row ' + (i + 1),
new Date((new Date()).getTime() - ((i + 1) * 24 * 60 * 60 * 1000)),
new Date()
]);
}
chart.draw(dataTable);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>
编辑
这是一个使用类似数据的工作示例...
EDIT
here is a working example using similar data...
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var jsonData = [{
"lineId": 1,
"lineName": "Line 1",
"status": 1,
"dateStart": "2017-08-03T15:10:20.42",
"dateEnd": "2017-08-03T15:10:23.353"
}, {
"lineId": 2,
"lineName": "Line 2",
"status": 2,
"dateStart": "2017-08-03T15:10:30.42",
"dateEnd": "2017-08-03T15:10:33.353"
}, {
"lineId": 3,
"lineName": "Line 3",
"status": 3,
"dateStart": "2017-08-03T15:10:40.42",
"dateEnd": "2017-08-03T15:10:43.353"
}, {
"lineId": 4,
"lineName": "Line 4",
"status": 4,
"dateStart": "2017-08-03T15:10:50.42",
"dateEnd": "2017-08-03T15:10:53.353"
}];
var container = document.getElementById('chart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'row'});
dataTable.addColumn({type: 'string', id: 'bar'});
dataTable.addColumn({type: 'date', id: 'start'});
dataTable.addColumn({type: 'date', id: 'end'});
for (var i = 0; i < jsonData.length; i++) {
dataTable.addRow(
[jsonData[i].lineName.toString(), jsonData[i].status.toString(), new Date(jsonData[i].dateStart), new Date(jsonData[i].dateEnd)]
);
}
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
这篇关于时间线图表栏中的错误:< text>属性x:预期长度,"NaN".的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!