2017-09-14 36 views
1

這是當我創建一個與谷歌可視化庫可視化持續惡化:谷歌可視化沒有使用全部空間(曾經)

enter image description here

有左邊一個很好的75個像素至少和這個圖的右邊,再加上另一個30-40的頂部和底部。沒有理由,餡餅本身不可能更大,當我提供足夠的空間時,沒有理由讓右邊的傳說被包裝。

我該如何解決這個問題?

回答

1

PieChart是最糟糕的上漿

,但你可以使用選項進行微調 - >chartArea

看到下面的工作片斷......

與調整

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['cateory', 'value'], 
 
    ['1 - snail mail', 100], 
 
    ['2 - de-elevatd', 200], 
 
    ['3 - default', 900], 
 
    ['4 high', 100], 
 
    ]); 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('chart')); 
 
    chart.draw(data, { 
 
    chartArea: { 
 
     height: '100%', 
 
     width: '100%', 
 
     // prevent highlight color of slice from being cutoff on hover 
 
     top: 8, 
 
     bottom: 8 
 
    } 
 
    }); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>


無需調整

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['cateory', 'value'], 
 
    ['1 - snail mail', 100], 
 
    ['2 - de-elevatd', 200], 
 
    ['3 - default', 900], 
 
    ['4 high', 100], 
 
    ]); 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('chart')); 
 
    chart.draw(data); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart"></div>