Question

我正在使用Google图表-折线图来显示周趋势（x轴）相对于费用（y轴）。现在，如果我跨越过去9个月的周数，则由于空间限制，大多数x轴标签都被隐藏了。我试图仅在一个月的第一周显示轴标签，其余部分设置为空白。

是否可以将9个标签（每个月的第一周）显示9个月？

Answer 1

要显示特定的轴标签，请使用config option-> hAxis.ticks

ticks包含一个值数组，每个值将显示为标签。
该值应与数据表中x轴值的类型相同。

如果您使用日期，则应使用日期值填充数组。

hAxis: {
  ticks: [new Date(2018, 0, 1), new Date(2018, 1, 1), new Date(2018, 2, 1), ...]
}

您也可以使用对象符号来填充数组，
使用对象符号，您可以提供值（v:）和格式化值（f:）。

hAxis: {
  ticks: [{v: new Date(2018, 0, 1), f: '01/01/2018'}, {v: new Date(2018, 1, 1), f: '02/01/2018'}, ...]
}

请参见以下工作片段，数据和报价是动态构建的...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var datePattern = 'MM/dd/yyyy';
  var formatDate = new google.visualization.DateFormat({
    pattern: datePattern
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2018, 0, 1);
  var endDate = new Date(2018, 9, 0);
  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)
    };

    // add tick at beginning of each month
    if (rowDate.getDate() === 1) {
      ticksAxisH.push(xValue);
    }

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(dataTable, {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,
      left: 48,
      right: 18,
      bottom: 32
    },
    hAxis: {
      ticks: ticksAxisH
    },
    height: 288,
    legend: {
      position: 'top'
    },
    width: '100%'
  });
}

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

Google Charts Haxis标签呈现

1 个答案: