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

Question

Well, I am using a LineChart with Angular 4 and I make sure to change labels according to window size like the following:

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

This is just basic Angular syntax to detect resize or window and change the hAxis labels accordingly.

My question is, if I want a custom label where I present months on the labels and the months are presented with values of DAY OF THE MONTH and ONLY the first day of the month will have an addition of text to it like the following image:

RED : days of the month (jumps 5 days each time but not relevant) BLACK : first indication of the month (Should not be NOV 10, but NOV 1, not relevant)

Any idea?

Answer 1

to have one or more labels different from than rest,
will need to use option --> hAxis.ticks

this means you will need to build an array of the labels that should be displayed

using object notation, for each tick you can provide
the value of the tick ( v: )
and the formatted value of the tick ( f: )

{v: dateValue, f: displayValue}

the value ( v: ) should be the same type as the x-axis, in this case --> 'date'
the formatted value ( f: ) should be --> 'string'

if you don't use object notation, and just provide a date for the tick,
the label will be displayed according to --> hAxis.format

so, for the dates that should have the month prefix,
use object notation, for the rest, just provide the date

see following working snippet for an example...

 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>