Javascript Highcharts-当数据是动态的时，为特定值指定颜色

**注：基于内联网的项目

我正在处理的项目利用HighCharts生成饼图。此饼图的数据是通过使用REST API查询SharePoint列表动态创建的。我们总共有9个图表是这样创建的，其中8个有一个过滤器，用于将结果缩小到特定的组，而不是整体。问题是切片的颜色不一致，因为每次查询数据并将其组装到dataArray中时，值的顺序都不相同。我们想尝试做的是为每个数据点值指定一种颜色，以便颜色保持一致

例如：

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

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

然后，我们需要循环遍历DataArray，并将这些值应用于饼图切片（如果饼图切片存在于该数据集中）。例如，我们的数据集是：

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

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

同样，我们的数据是动态的，因此我们的实际系列代码是：

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

---

下面是我们正在使用的完整代码：

Utility.js文件（将数据处理到countArray中）

“严格使用”；
var-EngagementChartBuilder=window.EngagementChartBuilder | |{}；
EngagementChartBuilder.Utilities=函数（）{
var buildCategoryCounts=函数（countArray，dataArray）{
if（countArray==未定义）{
countArray=[]；
}
对于（var i=0；i

---

ViewModel.js REST查询

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

if（！Array.prototype.filter）{
Array.prototype.filter=函数（fun/*，thisp*/）{
“严格使用”；
if（this==null）
抛出新的TypeError（）；
var t=对象（本）；
var len=t.length>>>0；
如果（乐趣的类型！=“功能”）
抛出新的TypeError（）；
var-res=[]；
var thisp=参数[1]；
对于（变量i=0；i发生错误。”；
}
);
};
返回{
加载：加载
}
}();    

使用对象作为点，而不是使用数组作为点，简单更改：

countArray.push([currName, currValue]);

致：

第二个变化：

var newCount = countArray[j][1];
countArray[j][1] = newCount + currValue;

致：

---

好的，我理解你的推理。那么我的问题是，我该如何定义一个特定名称的颜色？所以基本上，如果currName=Resource，那么它应该始终是x颜色。如果currName=User Error，那么它应该始终是z颜色。只需创建一个全局映射：

var colorMap={'User Error'：'red'，'Resource'：'green'}

，然后使用

countArray.push（{name:currName，y:currValue，color:colorMap[currName]}）；

我已经尝试实现了这一点，

var newCount = countArray[j].y;
countArray[j].y = newCount + currValue;