Question

我正在使用饼图来显示我的数据。我现在可以正常工作，只显示百分比。但我想做的是显示百分比和数字。

The result I work on show as below

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/

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

1 个答案: