javascript - 谷歌图表 : condensing hAxis values

Question

我想减少 Google Charts' Area chart 的 hAxis 上的刻度数。我尝试使用 tick 选项，但它并不能完全实现我的目标。

例如，如果 hAxis 值如下:['Jun 2016', 'Jun 2016', 'Jul 2016', 'Aug 2016', 'Sep 2016', 'Sep 2016']

hAxis 不会显示重复项，以避免重复日期填入不必要的刻度线。

Answer 1

看不到代码，很难做出推荐

对于初学者来说，ticks 仅在 continuous axis 上受支持('日期'、'数字' 等...)

如果数据中的第一列是 --> 'string'

，则不支持<小时/>

否则，轴应仅显示提供的刻度

这里使用两个数组来构建刻度，
一个用于日期值，一个用于日期格式，
在添加每个单独的刻度之前检查日期格式...

  // avoid duplicates
  if (ticksAxisHFormatted.indexOf(formatDate.formatValue(xValue)) === -1) {
    ticksAxisHFormatted.push(formatDate.formatValue(xValue));
    ticksAxisH.push(xValue);
  }

<小时/>

请参阅以下工作片段...

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

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM yyyy'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Day');
  dataTable.addColumn('number', 'Y');
  dataTable.addColumn({role: 'style', type: 'string'});

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2016, 11, 7);
  var endDate = new Date();
  var ticksAxisH = [];
  var ticksAxisHFormatted = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // x = date
    var xValue = new Date(i);

    // y = 2x + 8
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
    dataTable.addRow([
      xValue,
      yValue,
      'point {fill-color: #003eff;}, line {stroke-color: #003eff;}'
    ]);

    // add ticks
    if (((i - startDate.getTime()) % 7) === 0) {
      // avoid duplicates
      if (ticksAxisHFormatted.indexOf(formatDate.formatValue(xValue)) === -1) {
        ticksAxisHFormatted.push(formatDate.formatValue(xValue));
        ticksAxisH.push(xValue);
      }
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(dataTable, {
    colors: ['#e6f4f9'],
    chartArea: {
      top: 16,
      left: 36,
      height: 360,
      width: '100%'
    },
    areaOpacity: 1.0,
    hAxis: {
      gridlines: {
        color: '#f5f5f5'
      },
      format: 'MMM yyyy',
      ticks: ticksAxisH
    },
    height: 400,
    legend: 'none',
    pointSize: 4,
    vAxis: {
      gridlines: {
        color: '#f5f5f5'
      }
    },
    width: '100%'
  });
}

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