繁体   English   中英

在Google Piechart图例上显示值

Show values on google piechart legends

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

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

您需要使用数字格式

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
        }
    }
};
2 单击Google图表(Piechart)切片时显示模式

我正在开发一个Web应用程序,其中一部分包含一项功能,当我们单击某个Google图表切片时,当前在浏览器中显示模式,我在Google图表中做了一个按钮作为工具提示,单击该按钮便给出了一个模式。 我要删除中间按钮,并在单击条/切片时直接进入模式。 我怎么能做到这一点。 ? 当前代码- 我添加了一 ...

6 Google饼图图例显示

我正在尝试使用Google的饼图API,使图表和图例垂直显示,图表在顶部,图例在下面。 我只希望图表宽度为300px,并且已成功将图例移至图表下方。 但是,由于宽度太小,图例会“切掉”并添加左/右箭头和#来滚动图例项。 我试图使图例也垂直显示在列表中。 不是从左到右,而是从上到下,以 ...

8 如何在PieChart上显示文本?

我已经使用以下代码创建了一个PieChart。 在这里,我已将x和y的总和设为100%,以便在pieChart上将x%显示为红色,将y%为绿色。 在红色上,我想显示精确的x% (示例45% (或) 55% ),在绿色上,我想显示精确的y% (示例55% (或) 45% )。 在我的 ...

9 包含所有值的PieChart

我是新手,正在使用仪表板。 我想用饼图显示一维的总值(所有寄存器全部选中时为100%,并使用其他过滤器进行更改)。 我已经用groupAll()尝试过了,但是没有用。 此代码有效,但显示了单独的组。 我怎样才能做到这一点? 非常感谢!!! CSV 代码工作 我可 ...

10 PieChart边框不显示

我正在通过以下类似主题进行工作: python-pptx:更改饼图的边框宽度 但是似乎不起作用 我从json文件中获取所有参数,并且可以正常工作,问题出在边框上。 我不确定此实现是否正确 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM