Question

我想减少Google Charts' Area chart的hAxis上的滴答数量。我尝试使用DefaultCredentialProviderChain选项，但它并没有完全实现我的目标。

例如，如果hAxis值如下：tick

hAxis不会显示重复项，以免重复日期填写不必要的刻度标记。

Answer 1

没有看到代码，很难提出建议

首发，ticks仅支持continuous axis（'date'，'number'等等。）

如果数据中的第一列是 - ＆gt;则不支持

'string'

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

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

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

请参阅以下工作代码段...

＆＃13;

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%'
  });
}

＆＃13;

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

＆＃13;

Google Charts：缩小hAxis值

1 个答案: