Liniendiagramm (Google Chart) benutzerdefinierte Etiketten

Question

Nun, ich bin ein Linechart mit kantigem 4 mit und ich sicherstellen, dass Etiketten ändern, nach Fenstergröße wie folgt aus:

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

Dies nur grundlegende Angular Syntax erkennen Sie die Größe oder das Fenster und ändern Sie die hAxis-Beschriftungen entsprechend.

Meine Frage ist, wenn ich ein benutzerdefiniertes Etikett möchte, wo ich Monate auf den Etiketten und die Monate mit Werten von TAG des Monats präsentieren und nur der erste Tag des Monats wird eine Ergänzung von Text zu haben es mag folgendes Bild:

RED: Tage des Monats (Sprünge 5 Tage jedes Mal, aber nicht relevant) BLACK: erste Anzeige des Monats (10 nicht November sein sollte, aber NOV 1, nicht relevant)

Irgendeine Idee?

Answer 1

ein oder mehrere Etiketten aus als Rest unterschiedlich haben,
müssen Option nutzen ->hAxis.ticks

das heißt, Sie müssen eine Reihe von den Etiketten erstellen, die

angezeigt werden sollen unter Verwendung von Objekt Notation für jede Zecke Sie
der Wert der Zecke (v:)
und die formatierten Wert der Zecke zur Verfügung stellen kann (f:)

der Wert (v:) soll vom gleichen Typ wie die x-Achse sein, in diesem Fall ->'date'
der formatierte Wert (f:) sollte ->'string'

, wenn Sie don‘ t Verwendung Objekt Notation und bietet nur einen Termin für die Zecke,
das Etikett nach angezeigt werden ->hAxis.format

so, für die Tage, die den Monat Präfix haben sollten,
Verwendung Objekt Notation, Diese für den Rest, bieten nur das Datum

für ein Beispiel folgende Arbeits Schnipsel sehen ...

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>