Labeled Google Corechart 传说中的问题

Question

我正在使用 Google Core 图表来绘制我的数据。我对图表有特定的自定义要求，它是带有标记图例的圆点图表。

我也达到了同样的效果，但问题是当馅饼上有一定的价值彼此靠近时，传说中的一个就消失了。

以下是 jsfiddle 示例： https://jsfiddle.net/mudass1rk/270cdraq/1/

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     98],
          ['Eat',      2],
          ['Commute',  4],
          ['Watch TV', 5]
        ]);

        var options = {
            pieHole: 0.75,
            backgroundColor: { fill: 'transparent'},
            pieSliceBorderColor: "black",
            legend: {
                position: 'labeled',
                textStyle:{
                    color: 'white'
                },
                alignment: 'center'
            },
            
            pieSliceText: 'none',
            pieStartAngle: 0,
            height: 300,
            //width: 300,
            chartArea:{top:40},
            // tooltip: {trigger: 'selection'},
            slices: [{color: '#00DBD1'}, {color: '#61F28F'}, {color: '#61F28F'}, {color: '#FFD100'}, {color: '#FF6B1A'}, {color: '#EB1212'}]
        };

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

        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="piechart" style="width: 900px; height: 500px;"></div>
   

非常感谢。

Answer 1

这是图表的限制。
除了将图表放大之外，您无能为力。

图表不会自动调整到容器上可用的最大尺寸。
在本例中，您将容器设置为 900 x 500。
您可以调整图表区域选项以提供更多空间，
以及高度和宽度选项...

    chartArea: {
      top: 40,
      height: '100%',
      width: '100%',
      left: 100,
      right: 100
    },
    height: '100%',
    width: '100%',

请参阅以下工作 sn-p...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 98],
    ['Eat', 2],
    ['Commute', 4],
    ['Watch TV', 5]
  ]);

  var options = {
    pieHole: 0.75,
    backgroundColor: {
      fill: 'transparent'
    },
    pieSliceBorderColor: "black",
    legend: {
      position: 'labeled',
      textStyle: {
        color: 'white'
      },
      alignment: 'center'
    },
    pieSliceText: 'none',
    pieStartAngle: 0,
    chartArea: {
      top: 40,
      height: '100%',
      width: '100%',
      left: 100,
      right: 100
    },
    height: '100%',
    width: '100%',
    slices: [{
      color: '#00DBD1'
    }, {
      color: '#61F28F'
    }, {
      color: '#61F28F'
    }, {
      color: '#FFD100'
    }, {
      color: '#FF6B1A'
    }, {
      color: '#EB1212'
    }],
  };

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

#piechart {
  height: 500px;
  width: 900px;
}

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