Highcharts - назначить цвет определенному значению при динамических данных

** ПРИМЕЧАНИЕ: ПРОЕКТ НА ОСНОВЕ ИНТРАНЕ

Проект, над которым я работаю, использует HighCharts для создания круговой диаграммы. Данные для этой круговой диаграммы динамически создаются путем запроса списка SharePoint с использованием REST API. У нас есть 9 диаграмм, которые создаются таким образом, и у 8 из них есть фильтр, применяемый для узких результатов к определенной группе, а не к Общему. Проблема заключается в том, что цвета для срезов несовместимы, поскольку значения не находятся в одном и том же порядке каждый раз, когда данные запрашиваются и собираются в нашем dataArray. То, что мы хотели бы попробовать, это присвоить цвет каждому значению данных, чтобы цвета оставались неизменными.

Например:

Resource = #123ABC
Lost Resource = #456DEF
User Error = #789GHI

Затем нам нужно было бы пропустить наш DataArray и применить эти значения к этому кусочку пирога, если он существует в этом наборе данных. Например, наш набор данных:

[Resource, 81.6],[Lost Resource, 1.0],[User Error, 0.01]

Опять же, наши данные динамичны, поэтому наш фактический серийный код:

series: [{
            type: 'pie',
            name: chartTitle,
            data: countArray,
        }]

Ниже приведен полный код, с которым мы работаем:

Файл Utility.js (обрабатывает данные в countArray)

"use strict";

var EngagementChartBuilder = window.EngagementChartBuilder || {};

EngagementChartBuilder.Utilities = function () {
var buildCategoryCounts = function (countArray, dataArray) {
    if (countArray == undefined) {
        countArray = [];
    }

    for (var i = 0; i < dataArray.length; i++) {
        var currValue = parseInt(dataArray[i].hours);
        var currName = dataArray[i].reason;
        var found = false;
        for (var j = 0; j < countArray.length; j++) {
            if (countArray[j][0] == currName) {
                found = true;
                var newCount = countArray[j][1];
                countArray[j][1] = newCount + currValue;
            }
        }
        if (!found) {
            countArray.push([currName, currValue]);
        }
    }

    return countArray;
},

loadPieChart = function (countArray, colorArray, divId, chartTitle) {
    //Build Pie Chart
    Highcharts.setOptions({
    })
    $(divId).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            backgroundColor:'rgba(255, 255, 255, 0.1)'
        },
        credits: {
            enabled: false
        },
        colors: colorArray,

        legend: {
            layout: 'horizontal',
        },
        title: {
            text: chartTitle
        },
        tooltip: {
            pointFormat: '<b>{point.y} hours</b>',
            percentageDecimals: 0
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b> {point.percentage:.1f} %'
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: chartTitle,
            data: countArray,
        }]
    });
}   

ViewModel.js REST QUERY

if (!Array.prototype.filter) {
Array.prototype.filter = function (fun /*, thisp */) {
    "use strict";

    if (this == null)
        throw new TypeError();

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun != "function")
        throw new TypeError();

    var res = [];
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
        if (i in t) {
            var val = t[i]; // in case fun mutates this
            if (fun.call(thisp, val, i, t))
                res.push(val);
        }
    }

    return res;
};
}

"use strict";

var EngagementChartBuilder = window.EngagementChartBuilder || {};

EngagementChartBuilder.EngagementsPieChart_COR = function () {
var load = function () {
    $.when(
        //Empire Engagements List
        EngagementChartBuilder.RESTQuery.execute("QA_TimeMgtPerRelease", "$select=*,ProjectRelease/CALCReportGroup,Reason_x0020_Type,CalculatedSubtotal&$filter=(((Reason_x0020_Type%20ne%20'Weekend%20Hours')%20and%20(Reason_x0020_Type%20ne%20'After%20Hours'))%20and%20(ProjectRelease/CALCReportGroup%20eq%20'COR'))&$top=2000")
    ).done(
        function (engagements1) {
            var dataArray = [];
            var countArray = [];

            //Get data from Empire Engagements List
            var results = engagements1.d.results;
            var filtered = [];
            for (var i = 0; i < results.length; i++) {
                if (results[i].ProjectRelease/CALCReportGroup == 'COR') {
                    filtered.push(results[i]);
                }
            }
            for (var i = 0; i < filtered.length; i++) {
                var reason = filtered[i].Reason_x0020_Type;
                var hours = filtered[i].CalculatedSubtotal;
                dataArray[i] = { 'hours': hours, 'reason': reason };
            }

            countArray = EngagementChartBuilder.Utilities.buildCategoryCounts(countArray, dataArray);

            //Build Chart
            EngagementChartBuilder.Utilities.loadPieChart CountArray, "#engagementPieChart_COR", "Testing Time vs. Time Lost (COR)");
        }
    ).fail(
        function (engagements1) {
            $("#engagementPieChart_COR").html("<strong>An error has occurred.</strong>");
        }
    );
};

return {
    load: load
}
}();