谷歌圖表中註釋的不同顏色

Question

我有兩種類型的註釋，一種有鏈接，另一種沒有。我想用不同的顏色爲它們着色。可能嗎？

型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>

編輯

有註解不同的顏色在一個系列中，
需要手動更改顏色當'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>