2014-06-20 7 views
5

Sono relativamente nuovo a Google Maps, quindi scusate la mia ignoranza;Modificare il colore di riempimento e tratto di un grafico ad area?

Sto guardando l'Area Grafico e voglio cambiare il colore di riempimento e traccia. Ecco il codice ...

<!-- 
You are free to copy and use this sample in accordance with the terms of the 
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) 
--> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
     <title> 
      Google Visualization API Sample 
     </title> 
     <script type="text/javascript" src="//www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['corechart']}); 
     </script> 
     <script type="text/javascript"> 

      function drawVisualization() { 
       // Some raw data (not necessarily accurate) 
       var data = google.visualization.arrayToDataTable([ 
        ['Month', 'Target'], 
        ['JAN', 85], 
        ['FEB', 105], 
        ['MAR', 65], 
        ['APR', 45], 
        ['MAY', 45], 
        ['JUN', 15], 
        ['JUL', 60] 
       ]); 

       // Create and draw the visualization. 
       var ac = new google.visualization.AreaChart(document.getElementById('visualization')); 
       ac.draw(data, { 
        title : '', 
        isStacked: true, 
        width: 600, 
        height: 400, 
        vAxis: {title: "Millions"}, 
        hAxis: {title: "Month"} 
       }); 
      } 

      google.setOnLoadCallback(drawVisualization); 
     </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
     <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html> 

L'altra parte della mia domanda è: dove posso trovare un riferimento completo per la personalizzazione di Google Charts?

Grazie,

risposta

7

Il riempimento e colore del tratto di ciascuna serie in AreaChart è determinato dal colore serie. È possibile impostare il colore di serie di dati impostando l'opzione colors (che accetta un array di stringhe di colore HTML, assegnato alla serie di dati al fine di colonna) o tramite l'opzione series.<series index>.color (che prende una stringa di colore HTML:

colors: ['#f36daa', 'blue', '#3fc26b'] 

o:

series: { 
    0: { 
     // set options for the first data series 
     color: '#f36daa' 
    }, 
    1: { 
     // set options for the second data series 
     color: 'red' 
    }, 
    2: { 
     // set options for the third data series 
     color: '#3fc26b' 
    } 
} 

opzioni grafico sono (soprattutto) documentate nella documentazione per il grafico specifica. (es: AreaChart) Alcune caratteristiche che si estendono su più grafici sono documentati separatamente (ad esempio: Intervals, Trendlines, Dashboards and Controls, Event Handlers, Animations). Strutture dati, manipolazione dei dati, formattazione e classi associate sono documentate nello API Reference.