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