如何在Google Chart中将hAxis设置为日期格式?

时间:2016-07-05 20:22:17

标签: charts google-visualization

我使用Google Chart作为DataTable。 我尝试将hAxis设为日期格式:

hAxis: {
            title: '',
            format: 'date',
            viewWindow: {
                min: [7, 30, 0],
                max: [17, 30, 0]
            }
        }

将行添加为:

data.addRows([
        [{v: [8, 0, 0], f: '03/02/13'}, 1],
        [{v: [9, 0, 0], f: '04/02/13'}, 2],
        [{v: [10, 0, 0], f:'05/02/13'}, 3],
        [{v: [11, 0, 0], f: '06/02/13'}, 4],
        [{v: [12, 0, 0], f: '07/02/13'}, 5]
    ]);

我需要以日期格式输入水平线(hAxis)标题:dd/mm/yy

1 个答案:

答案 0 :(得分:1)

hAxis.format需要一个模式或模式名称 所以它会像......

hAxis: {
  format: 'short'
  // or
  format: 'dd/MM/yy'
}

但是,正如评论中所指出的,列类型似乎是timeofday

为避免更改列类型,您可以提供自己的自定义hAxis.ticks
使用提供给图表的数据

请参阅以下内容,工作代码段。使用rawData填充图表数据并勾选...



google.charts.load('current', {
  callback: function () {
    var rawData = [
        [{v: [8, 0, 0], f: '03/02/13'}, 1],
        [{v: [9, 0, 0], f: '04/02/13'}, 2],
        [{v: [10, 0, 0], f:'05/02/13'}, 3],
        [{v: [11, 0, 0], f: '06/02/13'}, 4],
        [{v: [12, 0, 0], f: '07/02/13'}, 5]
    ];

    var data = new google.visualization.DataTable();
    data.addColumn({label: 'Date', type: 'timeofday'});
    data.addColumn({label: 'Count', type: 'number'});
    data.addRows(rawData);

    var hTicks = [];
    for (var i = 0; i < rawData.length; i++) {
      hTicks.push(rawData[i][0]);
    }

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
      hAxis: {
          ticks: hTicks,
          title: '',
          viewWindow: {
              min: [7, 30, 0],
              max: [17, 30, 0]
          }
      }
    });
  },
  packages:['corechart']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;