Google Charts圖例標籤被截斷

當標籤太長時，我的餅圖的圖例標籤被截斷。我已經嘗試將寬度設置爲「100％」，但我的傳奇對於解決這個問題有很大的幫助。有沒有辦法分離定義餅圖大小和圖例大小？有人可以分享一個相同的工作示例。Google Charts圖例標籤被截斷

JS小提琴的鏈接：https://jsfiddle.net/2nzzLe18 容器div尺寸和圖例標籤字體大小是我的要求的一部分。

而且下面是代碼，

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

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['info regarding task Work',  11], 
     ['info regarding task Eat',  2], 
     ['info regarding task Commute', 2], 
     ['info regarding task Watch TV', 2], 
     ['info regarding task Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities', 
     chartArea: {left: -100, width: '100%'}, 
     legend: {textStyle: {fontSize: 15}}, 

    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
    }

謝謝，爾漢

來源

2016-10-04 Farhan

它可能是麻煩的適當大小的餅圖，
但它歸結爲調整整體的大小圖表div,
和chartArea的大小，其中繪製了餡餅（與圖例分開）

它可能會非常棘手，因爲它並不總是迴應你怎麼認爲它應該，
但我能得到整個圖例顯示

看到下面的工作片段，
移動整體從上div
爲圖表的選項style屬性的尺寸，然後調整chartArea

google.charts.load('current', {'packages':['corechart']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Task', 'Hours per Day'], 
 
    ['info regarding task Work',  11], 
 
    ['info regarding task Eat',  2], 
 
    ['info regarding task Commute', 2], 
 
    ['info regarding task Watch TV', 2], 
 
    ['info regarding task Sleep', 7] 
 
    ]); 
 

 
    var options = { 
 
    backgroundColor: 'cyan', 
 
    title: 'My Daily Activities', 
 
    chartArea: { 
 
     left: 0, 
 
     height: 250, 
 
     width: 600 
 
    }, 
 
    height: 300, 
 
    width: 600, 
 
    legend: { 
 
     maxLines: 1, 
 
     textStyle: { 
 
     fontSize: 15 
 
     } 
 
    }, 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="piechart"></div>

來源

2016-10-04 13:57:04 WhiteHat

謝謝@WhiteHat。但是自從我獲得動態數據後，我不得不更改爲帶標籤的傳說，因爲它非常難以斷言我將獲得的數據。 – Farhan

帶有標記圖例的餅圖：https：//jsfiddle.net/2nzzLe18/5/。你能否幫我改變字體樣式，以％灰色顯示。 – Farhan

圖例標籤仍然出現在兩行中。任何機會有一個選項可以在1行。 – Farhan

Google Charts圖例標籤被截斷

回答

相關問題