在谷歌饼图图例上显示值答案

【问题标题】：Show values on google piechart legends在谷歌饼图图例上显示值
【发布时间】：2018-10-12 15:29:22
【问题描述】：

我有这个谷歌饼图，它工作正常，除了图例文本之外，我想显示百分比和数字。下面是代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 options = {
            title: 'Registration',
            legend: { position: 'right', textStyle: { color: 'blue', fontSize: 16 } }
        };
        $.ajax({
            type: "POST",
            url: "adminrep.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>

<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>

我该如何完成这项工作？提前致谢。

【问题讨论】：

可能重复：stackoverflow.com/questions/19178029/…
@IronGeek 我看过那篇文章，那里给出的解决方案对我来说不可行。我想通过拥有图例位置来完成这项工作：对
帖子的回答给出了两个解决方案。第二个解决方案要求您将legend.position 选项设置为'labeled'，而使用setFormattedValue 的第一个解决方案则不需要。我认为这可以应用于您的问题。
@IronGeek setFormattedValue 仅有助于您在悬停时显示值的格式。它无助于显示带有图例的值。如果可行，请发布带有工作示例的答案。

标签： asp.net json ajax google-pie-chart

【解决方案1】：

尝试使用.setFormattedValue 格式化DataTable 中的标签。
这仍然需要您进行一些手动计算以获取值的总和，但它应该可以工作：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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 options = {
      title: 'Registration',
      legend: { 
        position: 'right', 
        textStyle: { color: 'blue', fontSize: 16 } 
      }
    };
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: {
        json: JSON.stringify({ 
          d: [
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
          ]}) 
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var data   = google.visualization.arrayToDataTable(r.d);                
            var count  = data.getNumberOfRows();
            var values = Array(count).fill().map(function(v, i) {
              return data.getValue(i, 1);
            });
            var total =  google.visualization.data.sum(values);
            values.forEach(function(v, i) {                                         
              var key = data.getValue(i, 0);
              var val = data.getValue(i, 1);
              data.setFormattedValue(i, 0, key + ' (' + (val/total * 100).toFixed(1) + '%)');                  
            });

            var chart = new google.visualization.PieChart($("#chart")[0]);
            chart.draw(data, options);
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });
  }
</script>

<div id="chart" style="width: 900px; height: 500px; margin-top:60px;"></div>

示例：https://jsfiddle.net/cn74tvmL/show

【讨论】：

感谢工作。是否可以将值与百分比一起添加？
是的。只需编辑 data.setFormattedValue() 行并在格式中包含值...

【解决方案2】：

你需要使用number format：

var formatter = new google.visualization.NumberFormat({pattern: '#,### MW'});
formatter.format(data, 1);

或：

chart1.options = {
    .
    .
    .
    pieSliceText: 'value',
    legend: {
        position: 'labeled',
        labeledValueText: 'both',
        textStyle: {
            color: 'blue', 
            fontSize: 14
        }
    }
};

【讨论】：

如果要渲染的数据太多，使用 position:labeled 会留下一些数据。我需要找到一种方法来显示具有图例位置的百分比和数字：对