如何绘制具有重复日期值的折线图?

时间:2014-03-07 15:35:53

标签: javascript google-visualization

我有点挣扎,因为我不确定如何使用谷歌'折线图'来实现重复的日期值。

这是我到目前为止所做的:

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'更新后可视化更新的图表:

enter image description here

可以使用“dateRangeSlider”等控制器分配日期的间隔吗?

非常感谢您的帮助和时间。

1 个答案:

答案 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)}},