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