如何在Google饼图图例中添加百分比和总计 [英] How to add Percentage and Total on the Legend of Google Pie Charts

问题描述

我有一个以饼图形式显示数据的页面。我使用Google Charts来执行此操作。以下是代码：

 < script type =text / javascriptsrc =https://www.google.com / JSAPI>< /脚本> 
< script type =text / javascript> 
 google.load（visual，1，{packages：[corechart]}）; 
 google.setOnLoadCallback（drawChart）; 
函数drawChart（）{
 var data = google.visualization.arrayToDataTable（[
 ['目标名称'，'请求次数']，
 ['弗兰克。 net Life Cover'，226]，
 ['Frank.net Hospital Cash Back'，147]，
 ['Frank.net Salary Protection'，228]，
 ['King King Car保险'，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（数据，选项）; 
} 
< / script> 
< div id =piechart2style =width：700px; height：400px; position：relative;>< / div> 
  

这是一个有效的JS FIDDLE：

  var dataArray = [
 ['Frank.net Life Cover'，226]，
 ['Frank.net Hospital Cash Back'，147]，
 ['Frank.net Salary保护'，228'，
 ['King Price Car Insurance'，328]，
 ['Momentum Medical Aid'，493]，
 ['Oplan Health Cover'，185，]， 
 ['Youi Quote'，33]，
]; 
 
 var total = getTotal（dataArray）; 
 
 //添加工具提示栏
 for（var i = 0; i< dataArray.length; i ++）{
 dataArray [i] .push（customTooltip（dataArray [i ] [0]，dataArray [i] [1]，total））; 
} 
 
 //更改图例
 for（var i = 0; i< dataArray.length; i ++）{
 dataArray [i] [0] = dataArray [i] [0] ++ 
 dataArray [i] [1] +requests，+（（dataArray [i] [1] / total）* 100）.toFixed（1）+ ％; 
} 
 
 //列名
 dataArray.unshift（['目标名称'，'请求次数'，'工具提示']）; 
 
 var data = google.visualization.arrayToDataTable（dataArray）; 
  

使用 arrayToDataTable ，你需要设置工具提示列中的角色工具提示：

  data.setColumnProperty（2，'role'，'tooltip'）; 
 data.setColumnProperty（2，'html'，true）; 
  

注意：如果您要创建 dataTable 使用此签名动态地调用 addColumn ：

  data.addColumn（{ 'type'：'string'，'role'：'tooltip'，'p'：{'html'：true}}）; 
  

在选项中添加工具提示：{isHtml：true} ：

  var options = {
 title：'Most Requested Sponsors'，
 width： 900，
身高：400，
工具提示：{isHtml：true} 
}; 
  

I have a page that displays data in a form of a Pie Chart. I use Google Charts to do this. Here's the code:

<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>

And here's a working JS FIDDLE:

http://jsfiddle.net/yRdW3/

Now, I need help on displaying the percentage and total next to each sponsor name on the legend. I have no idea how to achieve this. I want it to look similar to this:

解决方案

You can do this creating a column for tooltip and use your first column as legend. Check this FIDDLE

var dataArray = [
    ['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 total = getTotal(dataArray);

// Adding tooltip column  
for (var i = 0; i < dataArray.length; i++) {
  dataArray[i].push(customTooltip(dataArray[i][0], dataArray[i][1], total));
}

// Changing legend  
for (var i = 0; i < dataArray.length; i++) {
  dataArray[i][0] = dataArray[i][0] + " " + 
      dataArray[i][1] + " requests, " + ((dataArray[i][1] / total) * 100).toFixed(1) + "%"; 
}

// Column names
dataArray.unshift(['Goal Name', 'No. of times Requested', 'Tooltip']);

var data = google.visualization.arrayToDataTable(dataArray);

Using arrayToDataTable, you need to set the role tooltip in "Tooltip" column:

data.setColumnProperty(2, 'role', 'tooltip');
data.setColumnProperty(2, 'html', true);

Note: If you are creating the dataTable dynamically just call addColumn with this signature:

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

And in options add tooltip: { isHtml: true }:

var options = {
    title: 'Most Requested Sponsors',
    width: 900,
    height: 400,
    tooltip: { isHtml: true }
};

这篇关于如何在Google饼图图例中添加百分比和总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！