Come modificare il colore del testo di annotazione in google-charts

Question

Come si modifica il colore di un testo di annotazione in LineChart di Strumenti grafico di Google?

Ecco un esempio

google.load('visualization', '1', {packages: ['corechart']}); 
google.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 = { 
     title: 'Sales by Week', 
     displayAnnotations: true, 
     hAxis: {title: 'Date', 
       titleTextStyle: {color: 'grey'}}, 
     colors: ['#f07f09'] 
     }; 

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

voglio la linea di essere arancione e il testo di annotazione in grigio. Attualmente il testo dell'annotazione è arancione.

Answer 1

In realtà è possibile. Il colore delle annotazioni è uguale al colore della linea. Basta inserire un punto nel punto in cui si desidera creare un'annotazione e impostare il colore di un punto sul colore dell'annotazione desiderato.

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

e poi quando si aggiungono dati

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

Vedi esempio a http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

Answer 2

Risposta breve: no, non è possibile modificare il colore del testo tramite opzioni standard (è possibile scrivere qualcosa per trovare quel testo nell'SVG e cambiarne il colore con javascript, ma questo è oltre il mio livello).

È possibile visualizzare una risposta da ASGallant su Google Gruppi here e il suo esempio here.

// code borrowed from Google visualization API playground, slightly modified here 

google.load('visualization', '1', {packages: ['corechart']}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn({type: 'string', role: 'annotationText'}); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", null, null, 1, 1, 0.5]); 
    data.addRow(["B", null, null, 2, 0.5, 1]); 
    data.addRow(["C", null, null, 4, 1, 0.5]); 
    data.addRow(["D", null, null, 8, 0.5, 1]); 
    data.addRow(["E", 'foo', 'foo text', 7, 1, 0.5]); 
    data.addRow(["F", null, null, 7, 0.5, 1]); 
    data.addRow(["G", null, null, 8, 1, 0.5]); 
    data.addRow(["H", null, null, 4, 0.5, 1]); 
    data.addRow(["I", null, null, 2, 1, 0.5]); 
    data.addRow(["J", null, null, 3.5, 0.5, 1]); 
    data.addRow(["K", null, null, 3, 1, 0.5]); 
    data.addRow(["L", null, null, 3.5, 0.5, 1]); 
    data.addRow(["M", null, null, 1, 1, 0.5]); 
    data.addRow(["N", null, null, 1, 0.5, 1]); 

    // Create and draw the visualization. 
    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
    chart.draw(data, { 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     }, 
     curveType: "function", 
     width: 500, 
     height: 400, 
     vAxis: { 
      maxValue: 10 
     } 
    }); 
} 

Il meglio che puoi fare è quello di cambiare lo stile della linea, ma non sembra, come si può attualmente cambiare il colore della linea.

Answer 3

Se le annotazioni non "toccano", vale a dire. i punti che vorresti annotare non sono uno accanto all'altro, potresti aggiungere una seconda riga e aggiungere le annotazioni a quella linea.

Nell'esempio JSON di seguito ho una data e un "bilancio totale", nonché una linea "Ann".

"cols":[ 
     { 
     "id":"date", 
     "label":"date", 
     "type":"date", 
     "p":{ 
      "role":"domain" 
     } 
     }, 
     { 
     "id":"total-balance", 
     "label":"Total balance", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "id":"ann", 
     "label":"Ann", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotation" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotationText" 
     } 
     } 
    ], 

L'annotazione viene dopo la colonna "Ann" in modo che venga aggiunta ai punti di dati "Ann".

Nel mio JSON, la data e il "total-equilibrio" sono sempre compilato in "Ann" e le annotazioni di solito sono vuote:.

"rows":[ 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 1)" 
     }, 
     { 
      "v":1000 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 8)" 
     }, 
     { 
      "v":1001 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 

Quando ho bisogno di un'annotazione, la cellula "Ann" ottiene viene aggiunto lo stesso valore del saldo totale, e l'annotazione:

{ 
    "c":[ 
     { 
      "v":"Date(2013, 1, 26)" 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":"Something!" 
     }, 
     { 
      "v":"Something happened here!" 
     } 
    ] 
    }, 

Nella configurazione del GChart, è ora possibile impostare due colori. Uno per la linea normale e uno per la "Ann".

colors: ['black','red'] 

Se non si hanno le annotazioni "toccare", GCharts non tracciare una linea tra di loro ei punti restano "invisibili", mentre le annotazioni appaiono esattamente al posto giusto.

Answer 4

Non c'è bisogno di colonna di dati stile in più e il codice impianto idraulico per riempire per ogni riga con il brutto (e anche incompleta sopra) stringa di formattazione. Ricorrere alla colonna di stile separata solo se si desidera avere un colore di annotazione diverso per i diversi punti di dati.

C'è un'impostazione globale, la ricerca di annotations.textStyle in 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 
    } 
    } 
}; 

Ecco un codice concetto per il vostro caso (notare diversa inizializzazione google.charts, molto importante):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

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);  

}

Puoi anche modificare la formattazione del testo dell'annotazione, come grassetto, corsivo, tipo di carattere, ecc. Ecco un esempio le dove la maggior parte del testo è configurato in grassetto:

   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 
        } 
        } 
       };