Googleの図表内のアノテーションの色が異なります

Question

私は2種類の注釈を持っていますが、1つはリンクとそれ以外があります。私は色を変えて色を変えたい。出来ますか？

タイプ1がある -
{ v: 'sample', Link: 'some link }

タイプ2である -

{ v: 'sample', }

私は他の一部の色とTYPE2にTYPE1を色付けしたい、それは可能ですか？あなたが作業スニペット以下を参照してください個別に、全体的なチャートの

を
または各シリーズのための注釈のスタイルを設定することができます

Answer 1

、
fontSizeがすべての注釈
ため10に設定され、その後色がために変更されています個々のシリーズ

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

 
function drawStacked() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Month', 'A', {role: 'annotation'}, 'B', {role: 'annotation'}], 
 
    ['Aug', 3754, '3,754', 2089, '2,089'], 
 
    ['Sept', 900, '900', 200, '200'], 
 
    ['Oct', 2000, '2,000', 4900, '4,900'], 
 
    ['Nov', 1700, '1,700', 2200, '2,200'], 
 
    ['Dec', 2400, '2,400', 2089, '2,089'] 
 
    ]); 
 

 
    var options = { 
 
    annotations: { 
 
     textStyle: { 
 
     fontSize: 10 
 
     } 
 
    }, 
 
    series: { 
 
     0: { 
 
     annotations: { 
 
      stem: { 
 
      color: 'cyan', 
 
      length: 5 
 
      }, 
 
      textStyle: { 
 
      color: 'cyan' 
 
      } 
 
     } 
 
     }, 
 
     1: { 
 
     annotations: { 
 
      stem: { 
 
      color: 'magenta', 
 
      length: 10 
 
      }, 
 
      textStyle: { 
 
      color: 'magenta' 
 
      } 
 
     } 
 
     } 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
}

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

EDIT

が'ready'イベントが発生

が作業スニペットを次のように表示する場合、手動で色を変更する必要があり、単一シリーズでの注釈のためのさまざまな色を持っている...

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

 
function drawStacked() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Month', 'A', {role: 'annotation'}], 
 
    ['Aug', 3754, '3,754'], 
 
    ['Sept', {v: 900, p: {link: 'type A'}}, '900'], 
 
    ['Oct', {v: 2000, p: {link: 'type B'}}, '2,000'], 
 
    ['Nov', 1700, '1,700'], 
 
    ['Dec', 2400, '2,400'] 
 
    ]); 
 

 
    var options = { 
 
    annotations: { 
 
     textStyle: { 
 
     color: '#000000', 
 
     fontSize: 10 
 
     } 
 
    } 
 
    }; 
 

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

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) { 
 
     for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     if ((text.getAttribute('text-anchor') === 'middle') && (text.innerHTML === data.getFormattedValue(i, 1))) { 
 
      switch (data.getProperty(i, 1, 'link')) { 
 
      case 'type A': 
 
       text.setAttribute('fill', 'magenta'); 
 
       break; 
 

 
      case 'type B': 
 
       text.setAttribute('fill', 'cyan'); 
 
       break; 
 
      } 
 
     } 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

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