8
我想使用谷歌的餅圖API,並有圖表和圖例垂直顯示圖表頂部和圖例下面。我只希望圖表寬度爲300px,並已成功將圖例移動到圖表下方。但是,由於寬度很小,因此圖例會「切斷」並添加左/右箭頭和#以滾動圖例項目。谷歌餅圖圖例顯示
我想讓圖例在列表中垂直顯示它的項目。不是從左到右,而是從上到下,因此每個項目都可以看到。在他們的文檔中,我沒有看到針對此特定修補程序的任何配置選項。
這裏是我的代碼:
<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', 'Percentage'],
['Trust Funds - 52.6%', 52.6],
['Ed & Training - 13.6%', 13.6],
['Safety, Health & Env. - 10.5%', 10.5],
['Econ Dev & Infrastructure - 9.5%', 9.5],
['Admin - 7.2%', 7.2],
['Other - 2.2%', 2.2],
['Resettlement - 2%', 2],
['Matching Gifts/UW - 1.6%', 1.6],
['Arts/Culture - 0.8%', 0.8]
]);
var options = {
colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'],
pieSliceText:['none'],
legend:{position: 'bottom'},
chartArea:{left:6,top:6,width:"300px",height:"300px"}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
它看起來像傳說的方向是由位置決定不幸的是,你選擇。既然你知道你所提供的顏色,你能不能創建自己的顏色? – cchana
我希望能夠保持圖例列表的動態性。當你滾動這些項目時,餅圖「突出顯示」,這是我們想要維護的。但我可以很容易地刪除圖例,只是硬編碼一個圖例。謝謝。 –
您甚至可以通過方法和事件複製此功能:https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Methods – cchana