Question

我想在我的jquery 3D google图表上显示百分比（请参阅附图）。请告诉我如何实现它。

我使用下面的代码来实现jQuery google图表。我正在获取3D图表，但希望在每个duadrant谷歌图表上显示百分比。

https://support.google.com/docs/answer/190726?hl=en

$('#pieChart').gchart({
    type : 'p3',
    series : data,
    legend : 'top',
    dataLabels : [ 'HR', 'SRM', 'MM', 'SD' ],
    pieSliceText: 'value',
    // dataColors : [ 'red', 'lime', 'blue', 'green' ],
    extension : {
        chdl : 'HR|SRM|MM|SD',
        chco : 'FF0000|00FF00|0000FF|BB0000',
        chs : '450x100'
    }
});



/**
 * 
 */

$(function() {

var data = [ $.gchart.series('2012', [ 16.1, 33.9, 25.4, 16.4 ]),
        $.gchart.series('2013', [ 11.7, 34.1, 25.1, 22.1 ]) ];

var data1 = [ $.gchart.series('2012', [ 50.0, 25.4, 16.4 ]),
        $.gchart.series('2013', [ 45.8, 25.1, 22.1 ]) ];

$('#pieChart').gchart({
    type : 'p3',
    series : data,
    legend : 'top',
    dataLabels : [ 'HR', 'SRM', 'MM', 'SD' ],
    pieSliceText: 'value',
    // dataColors : [ 'red', 'lime', 'blue', 'green' ],
    extension : {
        chdl : 'HR|SRM|MM|SD',
        chco : 'FF0000|00FF00|0000FF|BB0000',
        chs : '450x100'
    }
});

$('input[name=pieType],#pieColours,#pieAngle').change(function() {
    /*
     * data[0].color = ($('#pieAngle').val() == 1 ? [ 'red', 'lime', 'blue',
     * 'green' ] : null);
     * 
     * data[1].color = ($('#pieAngle').val() == 2 ? [ 'ff8888', '88ff88',
     * '8888ff' ] : null);
     */
    $('#removeChart').toggle(function() {
        $(this).text('Re-attach');
        $('#defaultChart').gchart('destroy');
    }, function() {
        $(this).text('Remove');
        $('#defaultChart').gchart();
    });


    if (($('#pieAngle').val() == 1)) {
        //alert($('#pieAngle').val());
        $('#pieChart').gchart('option', {
            type : 'p3',

            series : data1,

            extension : {
                chdl : 'HR|SRM|MM',
                chco : '0000FF',
                chs : '450x100'
            }
        });
    } else if (($('#pieAngle').val() == 2)) {
        //alert($('#pieAngle').val());

        $('#pieChart').gchart('option', {
            type : 'p3',

            series : data,

            /*
             * pieOrientation : $('#pieAngle') .val(),
             */

            extension : {
                chdl : 'HR|SRM|MM|SD',
                chco : 'FF0000|00FF00|0000FF|BB0000',
                chs : '450x100'
            }
        });
    } else if (($('#pieAngle').val() == 3)) {
        //alert($('#pieAngle').val());

        $('#pieChart').gchart('option', {

            type : 'p3',

            series : data1,

            extension : {
                chdl : 'HR|SRM|MM',
                chco : 'ff8888 | 88ff88 | 8888ff| BB0000',
                chs : '450x100'
            }
        });
    } else if (($('#pieAngle').val() == 10)) {
        //alert($('#pieAngle').val());

        $('#pieChart').gchart('option', {
            type : 'p3',

            series : data,

            extension : {
                chdl : 'HR|SRM|MM|SD',
                chco : 'FF0000|00FF00|0000FF|BB0000',
                chs : '450x100'
            }
        });
    } 
});

}）;

Answer 1

如Google Charts documentation设置 pieSliceText 至百分比所述。

Answer 2

鉴于您要传递给gchart插件的选项，我相信该插件使用已弃用的Image Chart API，而不是较新的Interactive Chart API。我建议使用更新的API或不同的图表API，因为Image Chart API计划于2015年4月20日离线。

也就是说，您需要用于在饼图切片上启用百分比标签的选项是chl选项。这会将以管道分隔的标签字符串按顺序应用于饼图切片，例如：

chl: '10%|25%|35%|15%|10%|5%'

此仅适用于图像图表API。交互式图表API使用Magnus Burton的答案中指出的pieSliceText选项。

我想在Google饼图上显示百分比

2 个答案: