使用带有日期的Google折线图的正确方法是什么

leo*_*ora 5 charts date

我看到此链接使用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);
Run Code Online (Sandbox Code Playgroud)

Mat*_*all 4

该示例使用字符串来存储年份,因此不会发生“智能”间距。不过,GoogleDataTable确实支持DateDateTime列类型,因此应该足以满足您的需求。

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

基本上,而不是打电话

...
data.addColumn('string', 'Year');
...
Run Code Online (Sandbox Code Playgroud)

你会做

...
data.addColumn('date', 'TheDate'); // or datetime, depending on your needs
Run Code Online (Sandbox Code Playgroud)

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

...
data.addColumn('string', 'Year');
...
Run Code Online (Sandbox Code Playgroud)