Verschiedene Farben für Anmerkungen in Google-Diagramme

Question

Ich habe zwei Arten von Anmerkungen, eine hat Links und andere nicht. Ich möchte sie beide in verschiedenen Farben färben. Ist es möglich?

Typ 1 -
{ v: 'sample', Link: 'some link }

Typ 2 -

{ v: 'sample', }

I Typ1 in einigen Farben und Typ2 in anderen färben möchten, ist es möglich?

Answer 1

können Sie die Anmerkungen für den gesamten Diagrammstil,
oder für jede Serie einzeln

siehe folgende Arbeits Schnipsel,
die fontSize-10 für alle Anmerkungen gesetzt
dann werden die Farben für die geänderte Einzel Serie

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

verschiedene Farben für Anmerkungen in einer einzigen Serie haben,
müssen Farbe manuell ändern, wenn die 'ready' Ereignis ausgelöst wird

siehe folgende Arbeits Schnipsel ...

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>