Jes*_*sus 16 google-visualization
嗨,我正在尝试在饼图的切片中应用颜色.我正在使用Google Charts API.
在这里您可以获得所有饼图信息:https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
以下是关于我所说话的捷径:
切片对象数组或具有嵌套对象的对象{}对象数组,每个对象描述饼图中相应切片的格式.要为切片使用默认值,请指定空对象{}.如果未指定切片或值,则将使用全局值.每个对象都支持以下属性:
color - 用于此切片的颜色.指定有效的HTML颜色字符串.textStyle - 覆盖此切片的全局pieSliceTextSlice.您可以指定一个对象数组,每个对象都按照给定的顺序应用于切片,或者您可以指定一个对象,其中每个子对象都有一个数字键,指示它应用于哪个切片.例如,以下两个声明是相同的,并将第一个切片声明为黑色,第四个切片声明为红色:
切片:[{color:'black',{},{},{color:'red'}]切片:{0:{color:'black'},3:{color:'red'}}
不知道我应该把这段代码放在哪里,这里是游乐场:https://code.google.com/apis/ajax/playground/？ type = visualization #pie_chart
这是我的尝试(这不起作用)
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'}]});
}
?
谢谢你的时间.////////////////////////////////////////////////// //////////////////////////////////////
编辑:
<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>
注意:我用过
slices: {0: {color: '#006EFF'}, 1:{color: '#00FF08'}, 2:{color: 'blue'}, 3: {color: 'red'}, 4:{color: 'grey'}}
代替
slices: [{color: 'black', {}, {}, {color: 'red'}]
再见.
小智 31
您可以使用以下更改饼图切片的默认颜色:
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
| 归档时间： |
|
| 查看次数： |
29172 次 |
| 最近记录： |