如何在饼图中显示百分比和数字？答案

【问题标题】：How to show percentage and number in pie chart?如何在饼图中显示百分比和数字？
【发布时间】：2015-07-20 11:59:43
【问题描述】：

我正在制作饼图来显示我的数据。我现在可以很好地使用它来只显示百分比。但我想做的是同时显示百分比和数字。

JS：

$(function() {
        var data = [];
        @if(count($data) > 0)
          data = <?php echo json_encode($data)?>;
        @endif
        var options = {
            series: {
                pie: {
                    show: true
                }
            },
            legend: {
                show: false
            },
            grid: {
                hoverable: false,
                clickable: true
            },
            colors: ["#94BEE0", "#D9DD81", "#E67A77","#747ddd","#669aaa","#aa7765"],
            tooltip: true,
            tooltipOpts: {
                defaultTheme: false
            }
        };
        $.plot($("#pie-chart #pie-chartContainer"), data, options);
};

我的数据结果

$total_amount = array_sum($interest_income);
    foreach($interest_income as $key => $inc){
        if($inc > 0){
            $per_value = ($inc * 100)/$total_amount;
            $data[] = [
                'label'=> $label[$key],
                'data'=> $per_value
            ];
        }
    }

【问题讨论】：

Jquery Flot pie charts show data value instead of percentage的可能重复
我发现这个答案可能会重复我的问题。但是我无法理解为什么我决定再次在这里问的答案。
@TumLina 这就是为什么人们需要更多地解释他们的答案。很多“试试这个” 的答案很流行而且没用。不管你的data是什么，你可以根据data是什么来做类似的事情。
@SpencerWieczorek - 我的数据是我在上面的 php 函数中计算的结果。
@TumLina 同意，答案不是很好。我试图在下面自己的答案中进行解释。

标签： javascript laravel-5.1

【解决方案1】：

您的 PHP 正在生成百分比，但您需要更改它以生成原始数字（Flot 可以自动计算出百分比）：

foreach($interest_income as $key => $inc){
    if($inc > 0){
        $data[] = [
            'label'=> $label[$key],
            'data'=> $inc
        ];
    }
}

然后，在您的 JavaScript 中，为您的标签使用格式化程序，如下所示：

formatter: function (label, series) {
    var labelName = label;
    var labelNumber = series.data[0][1];
    var labelPercent = series.percent;
    var labelContent = label + '<br/>' + labelNumber + ' (' + labelPercent + '%)';
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + labelContent + '</div>';
},

您可以将其包含在您的选项中，如下所示：

var options = {
    series: {
        pie: {
            show: true,
            label: {
                formatter: function (label, series) {
                    var labelName = label;
                    var labelNumber = series.data[0][1];
                    var labelPercent = series.percent;
                    var labelContent = label + '<br/>' + labelNumber + ' (' + labelPercent + '%)';
                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + labelContent + '</div>';
                },
            }
        }
    },
    legend: {
        show: false
    },
    grid: {
        hoverable: false,
        clickable: true
    },
    colors: ["#94BEE0", "#D9DD81", "#E67A77","#747ddd","#669aaa","#aa7765"],
    tooltip: true,
    tooltipOpts: {
        defaultTheme: false
    }
};

JSFiddle：http://jsfiddle.net/LvLfcdur/

【讨论】：

好的，我先试试这个。
我有一个问题：series.percent 来自哪里？
@TumLina 它由 Flot 的饼图插件自动填充。
我仍然无法将我的饼图显示为您的 jsfiddle。由于我的数据 jsonencode 或其他原因，我不确定。变量数据 = []; @if(count($data) > 0) data = ; @endif
@TumLina 我建议使用console.log 输出data 的值，看看它包含什么。