Фон диаграммы приборной панели. Net mvc core

Question

Я попытался создать приборную панель, я хочу, чтобы цвета каждой части определялись автоматически.Как я могу это сделать?Спасибо

Answer 1

js:

$(document).ready(function () {
   
    ajaxForDashboard(null);
});

function ajaxForDashboard(parameter) {
    $.ajax({
        type: "GET",
        //url: '@Url.Action("GetTypologyPercentage","DashBoard")',
        url: "/Dashboard/GetPiePercentage",
        contentType: "application/json;charset=utf-8",
        data: { 'param': JSON.stringify(parameter)},
        //data: { 'param':parameter },
        dataType: "json",
        success: function (result) {
            var res = JSON.stringify(result);
            var array = JSON.parse(res);
            var arrayPieType = array.type.value;
            var arrayPieCG = array.cg.value;
            var arrayStage = array.stage.value;
            fillPieChart(arrayPieType.typologies, arrayPieType.percentages, arrayPieType.backGroundColors, "myPieChartType");
            fillPieChart(arrayPieCG.generalConditions, arrayPieCG.percentages, arrayPieCG.backGroundColors, "myPieChartCG");
            console.log(arrayStage);
            var node = document.createElement("div");
            document.getElementById("cardBodyType").appendChild(node);
            document.getElementById("cardBodyType").getElementsByTagName("div")[1].innerHTML = (setBodyCard(arrayPieType.typologies, arrayPieType.backGroundColors));
            node2 = document.createElement("div");
            document.getElementById("cardBodyCG").appendChild(node2);
            document.getElementById("cardBodyCG").getElementsByTagName("div")[1].innerHTML = (setBodyCard(arrayPieCG.generalConditions, arrayPieCG.backGroundColors));
            setStatusTable(arrayStage);

        }
    });
}

//Other Functions
function fillPieChart(labels, data, bgColors, div) {
    Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
    Chart.defaults.global.defaultFontColor = '#858796';
    // Pie Chart Example
    var ctx = document.getElementById(div);
    var myPieChart = new Chart(ctx, {

        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: bgColors,
                hoverBackgroundColor: bgColors,
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }],
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
            },
            legend: {
                display: false
            },
            cutoutPercentage: 80,
        },
    });
}
function setBodyCard(filter, colors) {
    var contentHtml = "<div class='mt-4 text - center small'>";

    for (var i = 0; i < filter.length; i++) {

        contentHtml += '<span class="mr-2"><i class="fas fa-circle" style="color:' + colors[i] + '"></i>' + filter[i] + '</span>   &nbsp;';

    }
    contentHtml += " </div>";
    return contentHtml;

}

function setStatusTable(array) {
    var list = [];
    list = array.projectGroups;
    percentage = array.percentages;
    var trNUmber =  document.getElementById("number").getElementsByTagName("td");
    var trPercentage = document.getElementById("percentage").getElementsByTagName("td");
    var tmp = 0;
    for (let j = 0; j < trNUmber.length; j++) {
        trNUmber[j].innerHTML = 0;
        trPercentage[j].innerHTML = 0+"%";
        for (let i = 0; i < list.length; i++) {
            if (trNUmber[j].id.indexOf(list[i].filter) > -1) {
                trNUmber[j].innerHTML = list[i].count;
                trPercentage[j].innerHTML = percentage[i] + "%";
                break;
            }
        }       
        
    }
    document.getElementById("number").value = trNUmber.innerHTML;
    document.getElementById("percentage").value = trPercentage.innerHTML;    
}

Answer 2

            Thank you for your responses: this is a controller:

                public async Task<JsonResult> GetPiePercentage(string param)
                {

                    var parameters = JsonConvert.DeserializeObject<Dictionary<string, object>> (param);

                    var cgList = Json(await GetGeneralConditionsPercentage(parameters));

                    return Json(new { Cg = cgList});

                }
public async Task GetGeneralConditionsPercentage(Dictionary param) { 
    DashBoardGeneralConditionViewModel listGC = new DashBoardGeneralConditionViewModel();
             var tmp = await GetProjectsByRole(c => c.GeneralCondition,param); 
             listGC.Percentages = tmp.Percentages;
         listGC.ProjectGroups = tmp.ProjectGroups; 
        listGC.BackGroundColors = tmp.BackGroundColors;
         var projectGroups = listGC.ProjectGroups; 
        var sum = projectGroups.Sum(item => item.Count);
listGC.Percentages = projectGroups.ConvertAll(x => Math.Round((x.Count * 100), 2, MidpointRounding.AwayFromZero) / sum); 
        listGC.GeneralConditions = projectGroups.Select(x => x.Filter).ToList();
         var counttype = listGC.GeneralConditions.Count(); 
        listGC.BackGroundColors = setColorsList(counttype);
         return listGC; 
        } 
        private List setColorsList(int filterNum) { 
        List Colors = new List() { "#000066", "#006600", "#ffff00", "#ff0000", "#000099", "#00cc00", "#cc9900", "#ff0066", "#00ccff", "66ff99", "#663300", "#993333" };
         List tmpColors = new List();
         for (int i = 0; i < filterNum; i++) 
        { 
        tmpColors.Add(Colors[i]); 
        } 
        return tmpColors;
         }