2012-09-24 2 views
11

Hallo Ich versuche, Farben in den Scheiben meines Kreisdiagramms anzuwenden. Ich verwende Google Charts API.Wie Sie Farbe auf ein Kreisdiagramm-Segment von Google Charts API anwenden

Hier haben Sie die alle Kreisdiagramm: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Und hier ist eine Abkürzung über das, was ich spreche:

Scheiben Array von Objekten oder ein Objekt mit verschachtelten Objekten {} Ein Array von Objekte, die jeweils das Format der entsprechenden Scheibe in der Torte beschreiben. Um Standardwerte für ein Segment zu verwenden, geben Sie ein leeres Objekt {} an. Wenn ein Segment oder ein Wert nicht angegeben ist, wird der globale Wert verwendet. Jedes Objekt unterstützt die folgenden Eigenschaften:

color - Die Farbe für diese Scheibe. Geben Sie eine gültige HTML-Farbe an Zeichenfolge. textStyle - Überschreibt die globale pieSliceTextSlice für diesen Slice. Sie können entweder ein Array von Objekten angeben, von denen jedes auf das Segment in der angegebenen Reihenfolge anwendet, oder Sie können ein Objekt angeben, wobei jedes untergeordnete Element über einen numerischen Schlüssel verfügt, auf den es angewendet wird . Zum Beispiel sind die folgenden zwei Deklarationen identisch und deklarieren Sie die erste Scheibe als schwarz und die vierte als rot:

Scheiben: [{color: 'schwarz', {}, {}, {color: 'rot' }] Scheiben: {0: {color: 'black'}, 3: {color: 'red'}}

weiß nicht, wo ich diesen Code setzen sollte, hier ist der Spielplatz: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

Dies ist mein Versuch (was nicht funktioniert)

Danke für Ihre Zeit. ////////////////////////////////////////////////////// ///////////////////////////////////////

EDIT:

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Work',  11], 
      ['Eat',  2], 
      ['Commute', 2], 
      ['Watch TV', 2], 
      ['Sleep', 7] 
     ]); 

     var options = { 
      title: 'My Daily Activities', 
      slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}} 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
</html> 

Hinweis: Früher habe ich

slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}} 

statt

slices: [{color: 'black', {}, {}, {color: 'red'}] 

Sie sehen.

+0

Hallo Jungs, ich denke, dass das Problem, weil der Spielplatz. Ich habe diesen Code (siehe den bearbeiteten Post) in meinem VPS getestet und es hat gut funktioniert. – Jesus

Antwort

25

können Sie folgende verwenden Standardfarbe des Tortendiagramm Scheiben zu ändern:

var options = { 
    width: 400, 
    height: 240, 
    title: 'Toppings I Like On My Pizza', 
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'] 
};