Графики Google Обозначения Legend отрезаны

Question

Этикетки легенды для моей круговой диаграммы отрезаны, когда ярлык слишком длинный. Я уже пробовал устанавливать ширину до 100%, но моя легенда способна справиться с этим. Есть ли способ дискретно определить размер круговой диаграммы и размер легенды? Может кто-то, пожалуйста, поделитесь рабочим примером того же.

Ссылка на JS Fiddle: 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); 
    } 

Спасибо, Фархан

Answer 1

может быть громоздким, чтобы правильно размер круговой диаграммы,
, но она сводится к корректировке размера из в целом диаграмма 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>