以时间为h轴的折线图

Question

我正在试验 Google 图表，但遇到了问题。如果您能提供帮助，我将不胜感激。

我有 2 个 google 图表，一个折线图和一个时间轴，如下所示：https://jsfiddle.net/bygo33n8/7/

代码如下：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>       
<div id="timeline" style="height: 180px;"></div>

google.load('visualization', '1', {packages: ['corechart', 'line', 'timeline']});
google.setOnLoadCallback(drawBasic);
google.setOnLoadCallback(drawChart);

function drawBasic() {

      var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'number', id: 'X' });
        dataTable.addColumn({ type: 'number', id: 'Y' });

        dataTable.addRows([
            [new Date(0,0,0,00,0,0), 0, 0],  
            [new Date(0,0,0,01,0,0), 148, 177], 
            [new Date(0,0,0,02,0,0), 214, 270], 
            [new Date(0,0,0,03,0,0), 0, 0]
        ]);

      var options = {
        hAxis: {
          title: 'Time'
          // textPosition: 'none'
        },
        vAxis: {
          title: 'Traffic'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(dataTable, options);
 }


function drawChart() {

    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    //specify only the time active
    dataTable.addRows([
        [ 'Activity', new Date(0,0,0,00,0,0),  new Date(0,0,0,00,20,0) ],
        [ 'Activity', new Date(0,0,0,01,0,0),  new Date(0,0,0,02,00,0) ],
        [ 'Activity', new Date(0,0,0,02,00,0),  new Date(0,0,0,03,00,0) ],
    ]);

    var options = {
        timeline: { showRowLabels: false }, 
        colors: ['green'],
        avoidOverlappingGridLines: true,
        //backgroundColor: '#FF0000'
    };

    chart.draw(dataTable, options);
}

我希望折线图的横轴与时间线的横轴一致。虽然我使用了相同的数据类型并以相同的方式写入数据，但折线图的水平轴输出的是随机日期。

Answer 1

日期不是随机的。对第一列使用 timeofday 类型以获得所需的结果：

    dataTable.addColumn({ type: 'timeofday', id: 'Start' });
    dataTable.addColumn({ type: 'number', id: 'X' });
    dataTable.addColumn({ type: 'number', id: 'Y' });

    dataTable.addRows([
        [[0,0,0], 0, 0],  
        [[1,0,0], 148, 177], 
        [[2,0,0], 214, 270], 
        [[3,0,0], 0, 0]
    ]);

以时间为h轴的折线图

Line chart with time as the hAxis

charts

google-visualization