2012-09-24 27 views
11

Merhaba Renkleri, pasta grafiğimin dilimleri içine uygulamak istiyorum. Google Grafikler API'sı kullanıyorum. İşteGoogle Grafikler API'sinden bir Pasta Grafiği dilimine renk nasıl uygulanır?

Bana bütün pasta grafik bilgiler: İç içe nesneler {ile

dilim nesnelerinin Array veya nesneyi} An: Burada https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Ya ben konuşuyorum hakkında kısayol olduğunu nesnelerinin her biri, her biri pastadaki ilgili dilimin formatını açıklar. Bir dilim için varsayılan değerleri kullanmak için boş bir nesne belirtin {}. bir dilim veya değer belirtilmezse, global değer kullanılır. Her nesne aşağıdaki özellikleri destekler:

color - Bu dilim için kullanılacak renk. Geçerli bir HTML rengi dizesi belirtin. textStyle - Bu dilim için global pieSliceTextSlice öğesini geçersiz kılar. Her biri öğesinin verilen sıraya göre uygulandığı bir nesne dizisi belirtebilirsiniz veya her çocuğun için hangi dilime uygulanacağını belirten bir sayısal anahtarın bulunduğu bir nesne belirtebilirsiniz . Örneğin, aşağıdaki iki bildirim özdeştir ve ilk dilimi siyah olarak ve dördüncü olarak kırmızı olarak bildirir:

dilimler: [{color: 'black', {}, {}, {color: 'red' }] dilim: {0: {color: 'siyah'}, 3: {color: 'kırmızı'}}

Bu kodu koymalıyız nereye

bilmiyor , burada oyun alanı bulunuyor: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

Bu benim Denemesi ve (hangi çalışmıyor)

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'}]}); 
} 
​ 
olduğunu

Zaman ayırdığınız için teşekkür ederiz. ///////////////////////////////////////////////// ///////////////////////////////////////

DÜZENLEME:

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

Not: Ben

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

yerine

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

görüşürüz

kullandı.

+0

Merhaba çocuklar, ben sorun oyun çünkü olduğunu düşünüyorum. VPS'mde bu kodu test ettim (düzenlenmiş yazıya bakın) ve iyi çalıştı. – Jesus

cevap

25

Sen pasta grafik dilimleri varsayılan rengini değiştirmek için aşağıdaki kullanabilirsiniz:

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