我有这个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>

我该如何完成? 提前致谢。

#1楼 票数:2 已采纳

尝试使用.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

#2楼 票数:0

您需要使用数字格式

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

  ask by prkash translate from so

未解决问题?本站智能推荐:

1回复

Google 饼图添加行 - 饼图未呈现

我在asp.netcore 中有这个JS 文件。 我正在尝试从我的数据库生成饼图,但只有 1 行数据。 我没有收到任何错误,但只有标题被渲染,而不是饼图。 我的JS代码 我的 C# 代码 编辑:在添加行中, globalData.NewConfirmed -> NewConfirm
1回复

google.visualization.PieChart不是构造函数

我正在使用饼图来显示数据,这是我的代码,我添加了以下脚本 和我用来显示聊天的功能:- 然后我从行中得到了错误: google.visualization.Pie Chart不是构造函数,而google.visualization.arrayToDataTable不是构造函数
1回复

Asp.Net MVC jqgrid没有显示我的数据

我正在尝试填充一个jqgrid。 呈现网格,但不显示任何数据。 我知道我的控制器(通过标准ajax函数调用)正在工作。 它返回我期望的数据。 如何验证jqgrid返回的数据相同,我在做什么错误而不允许支付数据? jqgrid: 从标准ajax返回的数据:
1回复

使用json或其他便捷类返回对象值

javascript无法从web方法获取价值。 对于位于CallMe()中的s的值说未定义。 我的目标是从Web方法中获取一个对象。...以使用js中的数据。 我想念什么? js ****实用类****** 使用的技术:Asp.net 2.0 +启用Aj
1回复

显示JSON中的所有视频(ASP.NET MVC)

我有AJAX的代码,可从表中获取链接 这是代码 现在,我只显示数组中的第一个视频,但是可能大约是10个,我需要显示所有十个视频,我该如何重写代码?
1回复

如何从Cs页面到表示层(aspx)打印值列表

我在带有2Row的Cs页面中有一个列表对象。 如何在Aspx页面中单独获取它 例如:对于单个值,它将是: 像上面的代码一样,如何获取列表。
4回复

通过ajax将数据发布到数据库中。 显示501内部错误

我试图将数据从我的asp.net网络表单发布到数据库中。 我在我的asp.net服务(shoppingcart_service.asmx)中有此文件 这是我的HTML 这是我的ajax代码,我将其放在名为apps.js的文件中并链接到我的页面 //更新 ! 函数save
3回复

为什么当JSon总是返回true时,Ajax请求总是显示错误消息?

我不明白为什么会发生此错误。 我有一个名为SitePlanSaveTask的方法,该方法可创建新计划并在成功保存后返回Json True。 现在,当我调试该方法时,计划成功保存,并且Json始终返回true。 但在视图中,它始终会给出错误消息。 我的问题是,如果我的Json返回true,