2012-09-24 13 views
11

Hola Estoy tratando de aplicar color de los trocitos de mi gráfico de sectores. Estoy usando Google Charts API.Cómo aplicar color a un gráfico sector circular de Google Charts API

Aquí tienes toda la información gráfica circular: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Y aquí es es un acceso directo de lo que estoy hablando:

rebanadas matriz de objetos o un objeto con objetos anidados {} Un matriz de objetos , cada uno describiendo el formato del sector correspondiente en el pie . Para usar valores predeterminados para un sector, especifique un objeto vacío {}. Si no se especifica una porción o un valor, se usará el valor global. Cada objeto compatible con las siguientes propiedades:

de color - El color a utilizar para este segmento. Especifique una cadena válida de color HTML . textStyle: anula el pieSliceTextSlice global para este segmento . Puede especificar una matriz de objetos, cada uno de los cuales se aplica a la división en el orden dado, o puede especificar un objeto donde cada niño tiene una tecla numérica que indica el que se mire se aplica a . Por ejemplo, las siguientes dos declaraciones son idénticas, y declara el primer segmento como negro y el cuarto como rojo:

sectores: [{color: 'black', {}, {}, {color: 'red' }] rebanadas: {0: {color: 'negro'}, 3: {color: 'rojo'}}

no sabe dónde debería poner este código, aquí está el patio de recreo: https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

Esta es mi attemp (que no funciona)

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

Gracias por su tiempo. ////////////////////////////////////////////////// ///////////////////////////////////////

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> 

Nota: he utilizado

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

lugar

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

verte.

+0

Hola chicos, creo que el problema se debe a que el patio de recreo. Probé este código (vea la publicación editada) en mi VPS y funcionó bien. – Jesus

Respuesta

25

Puede utilizar siguiente para cambiar de color por defecto de las rebanadas de un gráfico circular:

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