0

嗨，我从 google api 参考了甜甜圈图，一切正常。

但我有两个疑问：

一个。如图所示，如何为带有图例的值再添加一列

在此处输入图像描述

湾。当专注于特定领域时，如何增加图像的大小，如图所示。

在此处输入图像描述

这是代码

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Total Expenses in percentage'],
          ['Home Loan', 28],
          ['Rent', 23],
          ['Other EMI',  11],
          ['Utilities', 7],
          ['Childrens Education', 6],
          ['Recreation', 25]
        ]);

        var options = {
          title: 'Total Annual Expenses',
          colors:['#CCCCCC','#D95B43','#C02942','#542437','#53777A','#ECD078'],
          pieHole: 0.5,
          pieSliceText: 'Annual Expenses',

          pieSliceTextStyle: {color: 'Annual Expenses', fontName: 'Century Gothic', fontSize: 14}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
      <div>
    <div id="donutchart" style="width: 700px; height: 400px;"></div>
    <div id="pieholetext" style="position:relative; width: 50px; height: 30px; margin-top: 20px;  bottom:235px;
       left:230px;">Annual Expenses</div>
    </div>
  </body>
</html>

参考链接是参考

请建议如何做。

提前致谢。

4

0 回答 0