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图例标签被截断

回答

相关问题