谷歌餅圖強制渲染餡餅外的“次要”標簽

Question

我已經研究了很多關於谷歌餅圖和隱藏的切片標簽，但沒有找到切片外的標簽，所以我希望有另一個解決方案，而不是已經 建議 的SO 。

我生成了許多不同的圖表類型，為了更好的可讀性，我自定義了pie（doghnut）圖表，以便在切片外部顯示標簽，並用線條連接。 現在正如其他問題中所見，谷歌圖表只會隱藏切片標簽，如果沒有空間或價值太小，這對我來說是不可接受的，為什么我想把它們顯示在應該有足夠空間的地方之外。

仍然谷歌圖表不喜歡“次要”數據值，只是沒有顯示他們的標簽，即使sliceVisibilityThreshold設置為0 ，是否還有其他解決方案，並考慮到以下設置？ （您應該看到紫色切片的標簽“遠”未呈現）

 var chartData = { "options": { "legend": { "position": "none" }, "pieHole": 0.5 }, "data": [ [ "Label 1", "Label 2" ], [ "Foo", 33059 ], [ "Bar", 57893 ], [ "Baz", 8135 ], [ "Boo", 12211 ], [ "Far", 3740 ], [ "Faz", 7219 ] ] }, ctx = document.getElementById('canvas'); var onLoadGoogle = function() { var data = new google.visualization.arrayToDataTable(chartData.data); var chart = new google.visualization['PieChart'](ctx); var options = chartData.options; options.legend.position = 'labeled'; options.pieSliceText = 'none'; options.sliceVisibilityThreshold = 0; chart.draw(data, chartData.options); } window.google.load("visualization", "1.1", { packages: ["corechart"], callback: onLoadGoogle, nocss: true }); 

 #canvas { width: 600px; height: 300px; } 

 <div id="canvas"></div> <script src="https://www.google.com/jsapi"></script> 

Answer 1

正如pieStartAngle 文檔中所述， pieStartAngle選項可以幫助為某些標簽騰出空間，但如果空間不足，則無法做任何事情。 這適用於切片內的默認標簽和您正在使用的標簽圖例選項。

您還可以嘗試使用pieSliceTextStyle和legend.textStyle將fontSize選項設置為較小的字體。