javascript - Google 图表 - hAxis 上的不同格式

Question

我在简单的谷歌图表上的 hAxis 格式有问题。在我的选项中:

'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 .

我想在图表上显示每个星期一，例如“Monday 06/02”。其他日期的显示方式与现在一样:

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

可以得到这个吗？

Answer 1

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

以下工作片段从星期一开始每 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'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>