Chart.js 如何对饼图中的值求和并将它们显示在 header

Question

我有一个饼图，显示有多少人按地区登记。我需要做的是对饼图切片求和并在饼图的 header/title 中显示总数。
我正在使用 chart.js 和 c#。

数据

Area    People Registered  
BBB     618  
GG      1186  
KK      575   
HTC     630

到目前为止，这是我的代码。

  @Scripts.Render("~/bundles/chartjs")
<script type="text/javascript">
    var seriesColors = [
        "#5b9bd5", "#a5a5a5", "#4472c4", "#255e91", "#636363", "#264478", "#7cafdd", "#335aa1", "#698ed0",
        "#327dc2", "#848484"
    ];
    var quorumData = [];
    var prisecData = [];
    //var raincheckData = [];
    var groupData = defineGroupDataArray();
    //var percent = defineGroupDataArray();
    var barData = defineBarDataArray();

    $(function() {
        // Global Chart Options
        Chart.defaults.global.tooltips.mode = "label";
        Chart.defaults.global.legend.display = false;
        Chart.defaults.global.maintainAspectRatio = true;
        // Pie Chart Options
        Chart.defaults.pie.segmentShowStroke = true;
        // Bar Chart Options
        Chart.defaults.bar.scaleBeginAtZero = false;

        updateQuorumChart(true);
        updateGroupCharts(true);

        setInterval(function() {
                updateQuorumChart(false),
                    updateGroupCharts(false);
            },
            5000);
    });

    function defineGroupDataArray() {
        return {
            labels: [],
            datasets: [
                {
                    data: [],
                    backgroundColor: []
                }
            ]
        };
    };

 function drawAttendByAreaChart(animate, quorumData) {

        $("#attendbyarea").remove();
        $("#attendbyarea-container").append('<canvas id="attendbyarea"></canvas>');
        $("#attendbyarea-header").text("Attendees by Area ("+  + ")");

        var context = $("#attendbyarea");
        var chart = new Chart(context,
            {
                type: 'pie',
                data: groupData,
                options: {
                    animation: {
                        animateRotate: animate,
                        animateScale: animate
                    }

                }
            });
    };

  function updateGroupCharts(animate) {
        $.getJSON('@Url.Action("GetGroupStatistics", "Account")',
            null,
            function (result, quorumData) { onUpdateGroupCharts(animate, result) });
    };

 function onUpdateGroupCharts(animate, result) {
        $.each(result,
            function(groupIndex, groupValue) {
                groupData = defineGroupDataArray();
                $.each(groupValue.Data,
                    function(statIndex, statValue) {
                        groupData.labels.push(statValue.Description);
                        groupData.datasets[0].data.push(statValue.Count);
                        groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);
                    });

                switch (groupValue.Type) {
                case 0:
                    drawRegByAreaChart(animate);
                    break;
                case 1:
                    groupData = defineGroupDataArray();
                    $.each(groupValue.Data,
                        function(statIndex, statValue) {
                            groupData.labels.push(statValue.Description +
                                ': ' + statValue.Count +' (' + statValue.ToolTip);
                            groupData.datasets[0].data.push(statValue.Count);
                            groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);

                        });
                    drawRegByDistrictChart(animate);
                    break;
                case 2:
                    barData = defineBarDataArray();
                    $.each(groupData.datasets[0].data,
                        function(barIndex, barValue) {
                            //barData.labels.push(groupData.labels[barIndex]);
                            barData.datasets[0].data.push(barValue);
                        });
                    drawRegByHourChart(animate);
                    break;
                case 3:
                    drawRegByEmpChart(animate);
                    break;
                case 4:
                        drawAttendByAreaChart(animate);
                    break;
                }
            });
    };
</script>

}

在下图中，我需要按区域在与会者旁边显示总数 3,009。

Pie Chart

Answer 1

想通了。我使用一个函数为注册的人添加所有值，然后将其传递给我绘制饼图的函数。在我的案例中：

 case 4:
                        groupData = defineGroupDataArray();
                        var totalAttendees = 0;
                        $.each(groupValue.Data,
                            function(statIndex, statValue) {
                                groupData.labels.push(statValue.Description);
                                groupData.datasets[0].data.push(statValue.Count);
                                groupData.datasets[0].backgroundColor.push(seriesColors[statIndex]);
                                totalAttendees += statValue.Count;
                            }); 

                        drawAttendeesByAreaChart(animate,totalAttendees);
                    break;

在绘制图表功能中：

 function drawAttendeesByAreaChart(animate,totalAttendees) {

        $("#attendbyarea").remove();
        $("#attendbyarea-container").append('<canvas id="attendbyarea"></canvas>');
        $("#attendbyarea-header").text("Attendees by Area ("+ $.number(totalAttendees) +")");

     ...rest of code...
    };

Chart.js 如何对饼图中的值求和并将它们显示在 header

Chart.js How to sum the values in a pie chart and display them in the header

javascript

pie-chart

chart.js