Google图表 - hAxis上的不同格式

时间:2017-02-07 09:06:14

标签: javascript charts google-visualization axis

我在简单的Google图表上遇到了hAxis格式的问题。在我的选项var:

'hAxis': {
  baseline: minDate, 
  format: 'dd/MM'
},

我填写了values数组:

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'X');
dataTable.addColumn('number', 'Value'));
var values = [];
values.push([new Date(date), 10]); 

我得到了google chart hAxis

我想在我的图表上显示每个星期一,如“星期一06/02”。其他日子就像现在一样显示:

17/01 ---- 21/01 ----- 25/01 ----- 29/01 --- 02/02 ---- Monday 06/02

有可能得到这个吗?

1 个答案:

答案 0 :(得分:1)

使用hAxis.ticks提供自定义轴标签

以下工作代码段每7天添加一个标签,从星期一开始 ...



google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // set x value
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(dataTable, {
    hAxis: {
      baseline: startDate,
      format: 'dd/MM',
      ticks: ticksAxisH
    },
    legend: 'none'
  });
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;