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

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

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

---

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

然后，在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
    }
};

格式化程序：函数（标签，系列）{
var labelName=标签；
var labelNumber=系列数据[0][1]；
var labelPercent=系列百分比；
var labelContent=label+'
'+labelNumber+'（'+labelPercent+'%）；
返回“”+标签内容+“”；
},

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

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

var选项={
系列：{
馅饼：{
秀：没错，
标签：{
格式化程序：函数（标签，系列）{
var labelName=标签；
var labelNumber=系列数据[0][1]；
var labelPercent=系列百分比；
var labelContent=label+'
'+labelNumber+'（'+labelPercent+'%）；
返回“”+标签内容+“”；
},
}
}
},
图例：{
节目：假
},
网格：{
可悬停：错误，
可点击：正确
},
颜色：[“#94BEE0”、“#D9DD81”、“#E67A77”、“#747ddd”、“#669aaa”、“#aa7765”]，
提示：正确，
工具提示：{
defaultTheme:false
}
};

---

jshiddle:

可能重复我找到的答案可能与我的问题重复。但是我不明白为什么我决定在这里再次提问。@TumLina这就是为什么人们需要更多地解释他们的答案。很多“试试这个”答案都是流行的，没有用。不管怎样，你的

数据中有什么，你可以根据
数据的内容做类似的事情。@SpencerWieczorek-我的数据是我在php函数中计算的结果，如上所述。@TumLina同意，答案不是很好。我试着在下面自己的回答中解释。好吧，让我先试试。我有一个问题：系列。百分比来自哪里？@TumLina它是由Flot的饼图插件自动填充的。但我仍然无法将我的饼图显示为您的JSFIDLE。我不确定是因为我的数据代码还是什么。var数据=[]@如果（计数（$data）>0）data=@endif@TumLina我建议使用
console.log
输出
data
的值，查看它包含什么。