Question

好吧，我正在使用带有Angular 4的LineChart，我确保根据窗口大小更改标签，如下所示：

@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();
}

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

我的问题是，如果我想要一个自定义标签，我会在标签上显示月份，并且月份会显示月份的数值，并且只有月份的第一天才会有添加文本如下图所示：

RED ：每月的天数（每次跳5天但不相关） BLACK ：本月的第一个指示（不应该是NOV 10，但是NOV 1，不相关）

有什么想法吗？

Answer 1

有一个或多个标签与休息不同，
将需要使用选项 - ＆gt; hAxis.ticks

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

使用对象表示法，您可以提供每个刻度 tick（v:）的值以及tick（f:）

的格式化值

{v: dateValue, f: displayValue}

值（v:）应与x轴的类型相同，在本例中为＆gt; 'date'
格式化的值（f:）应为 - ＆gt; 'string'

如果您不使用对象表示法，只需提供刻度日期，
标签将根据 - ＆gt;显示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>

折线图（谷歌图表）自定义标签

1 个答案: