修改餅圖的尺寸（Google Chart Tools）

簡版 - 我想在修改後修改google.visualization.PieChart對象的寬度/高度，但我找不到任何文檔指出它是如何完成的。修改餅圖的尺寸（Google Chart Tools）

上下文 - 我正在構建覆蓋Google Map上一堆數據的可視化。在某些緯度/經度座標處，我想渲染一個餅圖標記，詳細說明與那個地方相關的某些統計數據。

爲了避免混淆屏幕，我想根據當前縮放級別改變餅圖標記的尺寸。這要求我重新渲染當前可見的所有標記，或者最好更改所有標記的寬度/高度屬性。

Pie chart on Google Map

我目前使用下面的設置來顯示我的圖表：

 legend: {position: "none"}, 
     width: 200, 
     height: 200, 
     backgroundColor: "transparent", 
     pieSliceText: "none", 
     colors: ["#C10001", "#F79647", "#92D051", "#558ED5", "#7F7F7F"], 
     tooltip: {textStyle: {fontSize: 14}}

有沒有一種方式，它創建之後改變圖表的尺寸是多少？

來源

2012-12-01 Pieter

目前唯一的工作解決方案是使用更改寬度/高度設置重繪整個圖表。這段代碼使用jQuery。

for (var i = 0; i < dataPoints.length; ++i) { 
    var drawingOptions = $.extend({}, defaultDrawOptions); 
    drawingOptions.width = defaultDrawOptions.width*(currentZoom/defaultZoom); 
    drawingOptions.height = defaultDrawOptions.height*(currentZoom/defaultZoom); 

    dataPoints[i].chart.draw(dataPoints[i].dataSource, drawingOptions); 
}

正如您所看到的，這個半解決方案相當笨拙，可能會不必要地惡化性能。

來源

2012-12-03 13:51:52 Pieter

我不認爲API中有東西;儘管如此，只要使用一點Javascript，你應該可以修改包含圖表的SVG標籤的屬性。一種可能的方法是添加一個viewBox屬性，該屬性可以放大或縮小餅圖。

來源

2012-12-02 00:41:59

有趣的提示，但是當我修改Firebug中的'svg'標記時，它不會保持它在地圖上的位置。我在[正常狀態]（http://i.imgur.com/F54Ni.png）及其[縮小的狀態]（http://i.imgur.com/HIOh6.png）中創建了圖表的屏幕截圖）。我想在特定位置呈現這些圖表，所以我需要它們圍繞其中心點進行縮放。 – Pieter

如何更改x/y以及viewBox;如果不好，那麼我想你需要更多的工作來修改SVG的內容，然後才能應用你的變換。 –

[贊]（http://i.imgur.com/pIMGF.png）？當我這樣做時，我只能看到餡餅的左上角。 – Pieter

修改餅圖的尺寸（Google Chart Tools）

回答

相關問題