javascript - 如何在 Google 饼图图例中添加百分比和总计

Question

我有一个以饼图形式显示数据的页面。我使用谷歌图表来做到这一点。这是代码:

<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([
          ['Goal Name', 'No. of times Requested'],
        ['Frank.net Life Cover', 226],
        ['Frank.net Hospital Cash Back', 147],
        ['Frank.net Salary Protection', 228],
        ['King Price Car Insurance', 328],
        ['Momentum Medical Aid', 493],
        ['Oplan Health Cover', 185],
        ['Youi Quote', 33],
        ]);

        var options = {
          title: 'Most Requested Sponsors'
        };

       var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
        chart.draw(data, options);
      }
    </script>
<div id="piechart2" style="width: 700px; height: 400px; position: relative;"></div>

这是一个有效的 JS FIDDLE:

http://jsfiddle.net/yRdW3/

现在，我需要帮助来显示图例上每个赞助商名称旁边的百分比和总数。我不知道如何实现这一目标。我希望它看起来像这样:

Answer 1

检查这个fiddle example .这是带有图例的代码(来自第一条评论的想法、总计算和更正的一些小错误)。

基本思想是将图表的 legend 选项设置为 none，然后您必须构建自己的图例。

如果将该代码加载到浏览器中，图例将位于右侧，但您必须设置适当的 CSS 规则才能使一切正确(我对 CSS 不太熟悉)。但是您知道如何做到这一点。

对于不同的图例颜色集，您可以查看 color brewer