javascript - 如何在饼图中显示百分比和数字？

Question

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

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

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