Asp.net 在谷歌图表图例上显示值

我有一个google piechart，它工作得很好，除了图例文本，我想显示百分比和数字。下面是代码

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

load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
标题：“注册”，
图例：{位置：'right'，文本样式：{颜色：'blue'，字体大小：16}
};
$.ajax({
类型：“POST”，
url:“adminrep.aspx/GetChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var chart=new google.visualization.PieChart（$（“#图表”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}

我该怎么做？提前谢谢

您需要使用：

或：

您需要使用：

或：

---

尝试使用

.setFormattedValue

格式化

数据表中的标签
这仍然需要您进行一点手动计算，以获得值的总和，但它应该可以工作：

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
标题：“注册”，
图例：{
位置：'右'，
textStyle:{color:'blue'，fontSize:16}
}
};
$.ajax({
类型：“POST”，
url:“/echo/json/”，
数据：{
json:json.stringify（{
d:[
[“任务”，“每天工作小时数”]，
[Work'，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]}) 
},
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var count=data.getNumberOfRows（）；
var values=Array（count）.fill（）.map（函数（v，i）{
返回数据.getValue（i，1）；
});
var total=google.visualization.data.sum（值）；
forEach（函数（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（$（“#图表”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}

示例：
尝试使用
.setFormattedValue
格式化
数据表中的标签
这仍然需要您进行一点手动计算，以获得值的总和，但它应该可以工作：

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
标题：“注册”，
图例：{
位置：'右'，
textStyle:{color:'blue'，fontSize:16}
}
};
$.ajax({
类型：“POST”，
url:“/echo/json/”，
数据：{
json:json.stringify（{
d:[
[“任务”，“每天工作小时数”]，
[Work'，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]}) 
},
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var count=data.getNumberOfRows（）；
var values=Array（count）.fill（）.map（函数（v，i）{
返回数据.getValue（i，1）；
});
var total=google.visualization.data.sum（值）；
forEach（函数（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（$（“#图表”）[0]）；
图表绘制（数据、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}

示例：
可能重复：@IronGeek我看到了那篇文章，给出的解决方案对我来说不可行。我想通过传奇人物的位置来实现这一点：对，邮报的回答给出了两个解决方案。第二个解决方案要求您将
图例.position
选项设置为
'labeled'
，而使用
setFormattedValue
的第一个解决方案则不需要设置。我认为这可能适用于您的问题。@IronGeek setFormattedValue只对如何在悬停时显示值的格式有帮助。它无助于用图例显示值。如果它有效，那么请发布一个带有工作示例的答案。可能重复：@IronGeek我看到了那篇文章，给出的解决方案对我来说不可行。我想通过传奇人物的位置来实现这一点：对，邮报的回答给出了两个解决方案。第二种解决方案要求您将
图例.position
选项设置为
“标签”
，同时
<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>