Cómo cambiar el color del texto de anotación en google-charts

Ya no tienes que buscar más en otros sitios porque estás al espacio adecuado, contamos con la respuesta que deseas sin complicaciones.

Solución:

No se necesita una columna de datos de estilo adicional ni un código de plomería para completar cada fila con un formato feo (e incluso incompleto arriba) string. Solo recurra a una columna de estilo separada si desea tener un color de anotación diferente para los diferentes puntos de datos.

Hay una configuración global, busca annotations.textStyle en https://developers.google.com/chart/interactive/docs/gallery/linechart

var options = 
  annotations: 
    textStyle: 
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    
  
;

Aquí hay un código de concepto para su caso (observe la inicialización diferente google.chartsmuy importante):

google.charts.load('current',  'packages': ['corechart', 'line', 'bar'] );
google.charts.setOnLoadCallback(drawChart);

function drawChart() 
  var data = new google.visualization.DataTable();      
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Sales');
  data.addColumn(id: 'title', label: 'Title', type: 'string', role: 'annotation');
  data.addRows([
    [new Date(2012, 3, 5), 80, null],
    [new Date(2012, 3, 12), 120, 'New Product'],
    [new Date(2012, 3, 19), 80, null],
    [new Date(2012, 3, 26), 65, null],
    [new Date(2012, 4, 2), 70, null],
  ]);

  var options = 
    chart: 
      title: 'Sales by Week'
    ,
    hAxis: 
      title: 'Date', 
      titleTextStyle: color: 'grey'
    ,
    annotations: 
      textStyle: 
        color: 'grey',
      
    
    colors: ['#f07f09']
  ;

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

También puede cambiar otro formato de texto de la anotación, como negrita, cursiva, tipo de fuente, etc. Aquí hay un ejemplo en el que la mayor parte del texto está configurado en negrita:

                var options = 
                  chart: 
                   title: title
                  ,
                  hAxis: 
                    textStyle: 
                      bold: true
                    
                  ,
                  vAxis: 
                    format: 'decimal',
                    textStyle: 
                      bold: true
                    
                  ,
                  legendTextStyle: 
                    bold: true
                  ,
                  titleTextStyle: 
                    bold: true
                  ,
                  width: chart_width,
                  //theme: 'material',  // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out
                  annotations: 
                    alwaysOutside: true,
                    highContrast: true,  // default is true, but be sure
                    textStyle: 
                      bold: true
                    
                  
                ;

En realidad puedes. El color de las anotaciones es el mismo que el color de la línea. Simplemente coloque un punto en el lugar donde desea hacer una anotación y establezca el color de un punto en el color de anotación deseado.

data.addColumn(type: 'string', role: 'style');
data.addColumn(type:'string', role:'annotation');

y luego cuando agregas datos

'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation'

Ver ejemplo en http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-sp-500

Sección de Reseñas y Valoraciones

Recuerda algo, que puedes optar por la opción de añadir una estimación justa .

---

---

Utiliza Nuestro Buscador