Chart.js Как суммировать значения в круговой диаграмме и отображать их в заголовке - PullRequest
Новая
       23

Chart.js Как суммировать значения в круговой диаграмме и отображать их в заголовке

0 голосов
/ 14 марта 2019

У меня есть круговая диаграмма, которая показывает, сколько людей зарегистрировалось по регионам.Что мне нужно сделать, так это сложить круговые ломтики и отобразить сумму в заголовке / заголовке круговой диаграммы.
Я использую 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отображаться рядом с участниками по области.

Круговая диаграмма

1 Ответ

0 голосов
/ 18 марта 2019

Разобрался.Я использовал функцию, чтобы добавить все значения для зарегистрированных людей, а затем передал это своей функции, которая рисует круговую диаграмму.В моем случае оценка: 

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