Google Chartsで注釈線をスタイルするにはどうすればよいですか？

Question

annotationsを使用してLineChart（特定の時点）に垂直線を表示するのにGoogle Charts APIを使用しています。

は、それは（私はいくつかの垂直gridlinesなどを追加する場合には、その色/太さを変更する）それをより見やすくするために、注釈ラインのスタイルを設定することは可能ですか？

Desired output

私は注釈ラインスタイル、ないthis質問に尋ねたよう注釈テキストスタイル、中で唯一興味があります。

私は、次のコードを持って：あなたはこのfiddleのコードで遊ぶことができます

function drawVisualization() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn('number', ''); 
    data.addColumn({ 
    type: 'boolean', 
    role: 'certainty' 
    }); 

    data.addRows([ 
    ["-6", null, 1, true], 
    ["-5", null, 2, true], 
    ["-4", null, 4, true], 
    ["-3", null, 8, true], 
    ["-2", null, 7, true], 
    ["-1", null, 7, true], 
    ["0", '', 8, true], 
    ["1", null, 4, false], 
    ["2", null, 2, false], 
    ["3", null, 3, false], 
    ["4", null, 3, false], 
    ["5", null, 1, false], 
    ["6", null, 1, false] 
    ]); 

    new google.visualization.LineChart(document.getElementById('visualization')). 
draw(data, { 
     curveType: 'function', 
     width: 500, 
     height: 400, 
     annotations: { 
     style: 'line' 
     } 
    }); 
} 

を。

Answer 1

最初は、... release notesに応じて（対jsapi）

ライブラリをロードするためにloader.jsを使用することをお勧め

jsapiローダがある経由で利用可能なまま、Googleのチャートのバージョンもはや一貫して更新されていません。新しい静的ローダー（loader.js）を使用してください。

これは...、次の設定オプションを使用して、注釈の線の色を変更するには、

次 ...

annotations.stem.color

をload声明、他には何も変更されます線の太さのオプションはありませんが、手動で変更することができます
ch芸術の'ready'イベントが発生

注釈が<rect>要素を使用して描画されるが

はちょうど
は注釈を見つけるために、DOM

次の作業スニペットは注釈線の色を使用してそれを見つけるために方法が必要です<rect>と幅を変更

google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawVisualization() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'x'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn('number', ''); 
 
    data.addColumn({ 
 
    type: 'boolean', 
 
    role: 'certainty' 
 
    }); 
 

 
    data.addRows([ 
 
    ["-6", null, 1, true], 
 
    ["-5", null, 2, true], 
 
    ["-4", null, 4, true], 
 
    ["-3", null, 8, true], 
 
    ["-2", null, 7, true], 
 
    ["-1", null, 7, true], 
 
    ["0", '', 8, true], 
 
    ["1", null, 4, false], 
 
    ["2", null, 2, false], 
 
    ["3", null, 3, false], 
 
    ["4", null, 3, false], 
 
    ["5", null, 1, false], 
 
    ["6", null, 1, false] 
 
    ]); 
 

 
    var chartDiv = document.getElementById('visualization'); 
 
    var chart = new google.visualization.LineChart(chartDiv); 
 

 
    var annotationColor = '#ff00ff'; 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) { 
 
     if (rect.getAttribute('fill') === annotationColor) { 
 
     rect.setAttribute('width', '8'); 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(data, { 
 
    curveType: 'function', 
 
    width: 500, 
 
    height: 400, 
 
    annotations: { 
 
     stem: { 
 
     color: annotationColor 
 
     }, 
 
     style: 'line' 
 
    } 
 
    }); 
 
}

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