2012-09-24 9 views
11

Witam Próbuję zastosować kolor w wycinkach mojego wykresu kołowego. Używam Google Charts API.Jak zastosować kolor do wycinka wykresu kołowego z Google Charts API

Tutaj masz wszystkie informacje wykres kołowy: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

I tu jest to skrót o czym mówię:

plastry tablicę obiektów lub obiektu z obiektów zagnieżdżonych {} An tablica obiektów , z których każda opisuje format odpowiedniego wycinka w segmencie . Aby użyć wartości domyślnych dla plasterka, określ pusty obiekt {}. Jeśli plasterek lub wartość nie zostanie określona, ​​zostanie użyta wartość globalna. Każdy obiekt obsługuje następujące właściwości:

kolor - Kolor używany do tego plasterka. Określ poprawny łańcuch koloru HTML . textStyle - Zastępuje globalny fragment pieSliceTextSlice dla tego plasterka . Można określić tablicę obiektów, z których każda ma zastosowanie do wycinka w podanej kolejności lub można określić obiekt , w którym każde dziecko ma klucz numeryczny wskazujący, do którego wycinka ma on zastosowanie: . Na przykład następujące dwie deklaracje są identyczne, a deklaruje pierwszy wycinek jako czarny, a czwarty jako czerwony:

wycinki: [{kolor: 'czarny', {}, {}, {kolor: 'czerwony' }] plastry: {0: {color: 'czarny'}, 3: {color: 'czerwony'}}

nie wiem gdzie mam umieścić ten kod, tutaj jest plac zabaw: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

To jest mój atrybut (który nie działa)

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work', 11], 
    ['Eat', 2], 
    ['Commute', 2], 
    ['Watch TV', 2], 
    ['Sleep', 7] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.PieChart(document.getElementById('visualization')). 
     draw(data, {title:"So, how was your day?", slices: [{color: 'black', {color: 'blue'}, {color: 'green'}, {color: 'red'}, {color: 'white'}]}); 
} 
​ 

Dzięki za poświęcony czas. ///////////////////////////////////////////////////////////////// ///////////////////////////////////////

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> 

Uwaga: Kiedyś

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

zamiast

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

zobaczenia.

+0

Hi guys, myślę, że problem jest, bo na placu zabaw. Przetestowałem ten kod (patrz edytowany post) w moim VPS i działało dobrze. – Jesus

Odpowiedz

25

można użyć następujących czynności, aby zmienić domyślny kolor wykres kołowy plasterki:

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