我有点挣扎,因为我不确定如何使用谷歌'折线图'来实现重复的日期值。
这是我到目前为止所做的:
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('number', columnNames.split(',')[1]);
data.addColumn('string', columnNames.split(',')[2]);
data.addColumn('datetime', columnNames.split(',')[3]);
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
//var date = new Date(parseInt(jsonDate.substr(6)));
//var date = new Date(new Number(jsonDate.replace(/(^.*\()|([+-].*$)/g, '')));
//var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
alert(date);
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'PieChartContainer',
'options': {
'width': 950,
'height': 450,
'legend': 'right',
'hAxis': {
'format': "dd-MMM-yyyy",
'maxValue': new Date (2013, 01, 17), 'minValue': new Date (2013, 01, 10),
'viewWindow':{'max': new Date (2013, 01, 17)},
},
'title': chartTitle,
'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
'pieSliceText': 'label',
'tooltip': { 'text': 'percentage' }
},
'view': { 'columns': [3, 1] }
});
我在图表中添加了'hAxis'选项,但我得到'对象功能无法识别'错误。他们是更好的办法来完成这项任务吗?任何框架或指南都会非常有用。
为了进一步参考,我在服务器端使用哪种数据来绘制这个:
79.00 06/03/2013
15.00 06/03/2013
14.00 06/03/2013
20.00 06/03/2013
22.00 06/03/2013
92.13 06/03/2013
(I have 20 points for date 2013-01-16 and 10 points for date 2013-01-17)
'hAxis'更新后可视化更新的图表:
可以使用“dateRangeSlider”等控制器分配日期的间隔吗?
非常感谢您的帮助和时间。
答案 0 :(得分:1)
此行上的日期构造错误:
'maxValue': date (2013, 01, 16), 'minValue': date (2013, 01, 17), 'viewWindow':{'max': date (2013, 01, 17)}},
这些格式应为new Date(year, month, day)
:
'maxValue': new Date (2013, 01, 16), 'minValue': new Date (2013, 01, 17), 'viewWindow':{'max': new Date (2013, 01, 17)}},