使用谷歌折线图与日期的正确方法是什么

2023年9月19日 388次阅读

我看到
this link to use google chart api将多个折线图放在一起

建议在底线上设置日期的方法是什么,因为看起来图表中的每一行都具有相同的空间水平,所以如果我有图表,它们是日期和值,我希望日期值之间的正确间距( 1天的差异应该不同于1个月的数据点).

看起来你把日期放在第一列,它将每个“行”保持水平相同的距离.

编辑：我在下面添加了我的代码

function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Target');
        data.addColumn('number', 'Actual');

        data.addRows(9);

        data.setValue(0, 0, new Date(2010, 1, 1));
        data.setValue(0, 1, 215);
        data.setValue(0, 2, 215);

        data.setValue(1, 0, new Date(2010, 2, 1));
        data.setValue(1, 2, 213);

        data.setValue(2, 0, new Date(2010, 2, 4));
        data.setValue(2, 2, 213);

        data.setValue(3, 0, new Date(2010, 2, 8));
        data.setValue(3, 2, 213);


        data.setValue(4, 0, new Date(2010, 3, 1));
        data.setValue(4, 2, 220);

        data.setValue(5, 0, new Date(2010, 4, 1));
        data.setValue(5, 2, 190);

最佳答案 该示例使用字符串来存储年份,因此不会出现“智能”间距.但是,Google DataTable确实支持Date和DateTime列类型,因此应该满足您的需求.

http://code.google.com/apis/visualization/documentation/reference.html#DataTable

基本上,而不是打电话

...
data.addColumn('string', 'Year');
...

你会的

...
data.addColumn('date', 'TheDate'); // or datetime, depending on your needs

编辑：在这种情况下,您可能需要自己填充日期值.看起来固定间距来自DataTable中的行索引.例如,您可以看到此代码在图表中生成不同间距的数据点：

function drawVisualization() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Target');

    data.addRows(9);

    data.setValue(0, 0, new Date(2010, 1, 1));
    data.setValue(0, 1, 213);

    data.setValue(3, 0, new Date(2010, 2, 1));
    data.setValue(3, 1, 213);

    data.setValue(4, 0, new Date(2010, 2, 4));
    data.setValue(4, 1, 213);

    data.setValue(5, 0, new Date(2010, 2, 8));
    data.setValue(5, 1, 213);

    new google.visualization.LineChart(document.getElementById('visualization')).draw(data, null);

}

点赞