Question

我从服务器获取一些Google分析数据，并将其作为JSON传递给Google图表。我无法弄清楚如何将图表渲染为带有线条的日期轴。我现在看起来像http://screencast.com/t/VdPNzW6JDlPQ，我需要它看起来像http://screencast.com/t/yCzUdurhB。

这是代码

var Simple_data = new google.visualization.DataTable(Simple_setData(), 0.5);
visualization = new google.visualization.LineChart(document.getElementById('report_Simple'));
visualization.draw(Simple_data, Simple_options);

var Simple_options = { "title": "Test" };
function Simple_setData() {
    var Simple_JsonTable = { cols: [{id: 'ga:date', label: 'date', type: 'string'}, {id: 'ga:visits', label: 'visits', type: 'number'}, {id: 'ga:newVisits', label: 'new visits', type: 'number'}], rows: [{c:[{v: '10/14/2013'}, {v: 333}, {v: 266}]}, {c:[{v: '10/18/2013'}, {v: 161}, {v: 109}]}, {c:[{v: '10/24/2013'}, {v: 224}, {v: 163}]}]};
    return Simple_JsonTable;
}

提前致谢

Answer 1

我将假设您的Simple_setData函数是从Google Analytics获取数据的代码的替身，并且您的数据提取功能以完全相同的格式返回数据。如果您不想修改源代码，可以使用DataView将日期字符串转换为Date对象，如下所示：

var view = new google.visualization.DataView(Simple_data);
view.setColumns([{
    type: 'date',
    label: Simple_data.getColumnLabel(0),
    calc: function (dt, row) {
        var dateArray = dt.getValue(row, 0).split('/');
        var year = parseInt(dateArray[2]);
        var month = parseInt(dateArray[0]) - 1; // subtract 1 to convert to javascript's 0-indexed months
        var day = parseInt(dateArray[1]);
        return new Date(year, month, day);
    }
}, 1, 2]);

在绘制图表而不是DataTable时使用DataView：

visualization.draw(view, Simple_options);

更改Google折线图上的轴类型

1 个答案: