折れ線グラフ（グーグルチャート）カスタムは

Question

まあ、私は角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(); 
} 

これはちょうど基本的な角度構文ですサイズ変更またはウィンドウを検出し、それに応じてhAxisラベルを変更します。

私は月にラベルを表示し、月にはの値が表示されるカスタムラベルが必要な場合は、月の最初の日にのみ、それ以下の画像のように：

RED：月の日（5日、関連たびにジャンプではなく） BLACK：月の最初の兆候が（11月10日すべきではありません、 NOV 1、該当なし）

Answer 1

残りの部分よりも異なる1つの以上のラベルを持つように、
は、オプションを使用する必要があります - これはあなたが表示されるべきラベルの配列を構築する必要があることを意味します>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>