javascript - 折线图(google chart)自定义标签

Question

好吧，我在 Angular 4 中使用折线图，我确保根据窗口大小更改标签，如下所示:

@HostListener('window:resize', ['$event']) onResize(event) {
  if (event.target['innerWidth'] < 420) {
    this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM';
  } else if (event.target['innerWidth'] < 760) {
    this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MM. yy\'';
  } else { this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM d, yyyy'; }
this.drawBasic();
}

这只是基本的 Angular 语法，用于检测调整大小或窗口并相应地更改 hAxis 标签。

我的问题是，如果我想要一个自定义标签，我在标签上显示月份，并且月份显示的值为 DAY OF THE MONTH 并且只有该月的第一天会有向其中添加文本，如下图所示:

RED:一个月中的几天(每次跳 5 天但不相关)黑色:月份的第一个指示(不应是 11 月 10 日，而是 11 月 1 日，不相关)

有什么想法吗？

Answer 1

有一个或多个不同于rest的标签，
将需要使用选项 --> hAxis.ticks

这意味着您需要构建一个应该显示的标签数组

使用对象表示法，您可以为每个报价单提供
刻度值 (v:)
以及刻度的格式化值 (f:)

{v: dateValue, f: displayValue}

值 (v:) 应该与 x 轴的类型相同，在这种情况下 --> 'date'
格式化值 (f:) 应该是 --> 'string'

如果您不使用对象表示法，而只是提供一个打勾日期，
标签将根据 --> hAxis.format

显示

所以，对于应该有月份前缀的日期，
使用对象表示法，其余的，只需提供日期

请参阅以下工作片段以获取示例...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y0');
  data.addRows([
    [new Date(2017, 7, 1), 2],
    [new Date(2017, 7, 2), 3],
    [new Date(2017, 7, 4), 1],
    [new Date(2017, 7, 8), 5],
    [new Date(2017, 7, 16), 6],
    [new Date(2017, 7, 20), 7],
    [new Date(2017, 7, 24), 1],
    [new Date(2017, 7, 26), 2],
    [new Date(2017, 7, 27), 3],
    [new Date(2017, 8, 1), 2],
    [new Date(2017, 8, 2), 3],
    [new Date(2017, 8, 4), 9],
    [new Date(2017, 8, 8), 5],
    [new Date(2017, 8, 16), 6],
    [new Date(2017, 8, 20), 7],
    [new Date(2017, 8, 24), 1],
    [new Date(2017, 8, 26), 2],
    [new Date(2017, 8, 27), 3]
  ]);

  var oneDay = (1000 * 60 * 60 * 24);
  var dateRange = data.getColumnRange(0);
  var formatMonth = new google.visualization.DateFormat({
    pattern: 'MMM dd'
  });

  // build ticks
  var ticksX = [];
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
    var rowDate = new Date(i);
    if (rowDate.getDate() === 1) {
      // add first day of month
      ticksX.push({
        v: rowDate,
        f: formatMonth.formatValue(rowDate)
      });
    } else if (((i - dateRange.min.getTime()) % 7) === 0) {
      // add date every seven days
      ticksX.push(rowDate);
    }
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, {
    chartArea: {
      bottom: 36,
      left: 48,
      right: 12,
      top: 12,
      width: '100%',
      height: '100%'
    },
    hAxis: {
      format: 'dd',
      ticks: ticksX
    },
    width: 800
  });
});

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