Javascript 根据数据更改图例颜色高图表

我可以根据数据动态设置列的颜色，但不知道如何更改图例中的颜色。请注意，在jsfiddle上，最新的条是绿色的，但图例是蓝色的。是否有一种方法可以使更改列颜色的同时更改图例颜色

以下是我用于列颜色的代码：

jsfiddle：

函数makeRun（）{
var divId=“容器”；
无功电流=新阵列（99.95,99.96,99.97,99.98）；
var目标=新数组（99.965,99.965,99.965,99.965）；
var季度=新阵列（“第一季度”、“第二季度”、“第三季度”、“第四季度”）；
var width=495；var SizeOffnt='14px'；var currentName='Quarterly%'；
预处理数据=功能（数据、目标）{
var nDa=[]；
var colorGood='#348017'；var colorBad='#E42217'；var colorUse；
对于（变量i=0；i=goal[i]）{colorUse=colorGood；}
else{colorUse=colorBad；}
推({
y:数据[i]，
x:我，
颜色：颜色使用
});
}
回归洪水；
};
var图表=新的Highcharts.图表({
图表：{
renderTo:divId，
高度：275，//略大于ALOTED高度，使其更具可读性
宽度：宽度//取决于#量规
},
标题：{
text:'Title'，//应该是相同的，如果需要不同，可以创建参数
样式：{//上面文本的大小
fontSize:SizeOfFont
}
},
xAxis：{
类别:宿舍,，
标签：{//上面文本的大小^^
风格：{
字体大小：“10px”
}
}
},
亚克斯：{
最低：99.8，
最高：100，
标题：{
text:'百分比'，//参数，因为有些是天、百分比等
样式：{//y轴标题的大小
fontSize:SizeOfFont
}
},
标签：{
样式：{//y轴刻度标签的大小
fontSize:SizeOfFont
}
}
},
credits:{//去掉右下角的highcharts徽标
已启用：false
},
图例：{//底部的图例
风格：{
字体大小：“12px”
}
},
系列：[{
键入：“列”，
姓名：currentName，
数据：预处理数据（当前、目标），
数据标签：{
启用：对，
颜色：'黑色'，
格式化程序：函数（）{
return（Math.round（this.y*Math.pow（10,3））/Math.pow（10,3）+'%'）；//四舍五入到2位小数
},
风格：{
字体大小：“12px”
}
}
},{
类型：“样条线”，
名称：“目标”，
数据：目标，
颜色：'#084482'，
标记：{
符号：“圆圈”
},
dashStyle:“dash”
}]
});
}

系列中的颜色已更改。我通过添加seriesColor=colorUse修改preprepredata函数来解决这个问题。我还将seriesColor变量添加到代码的顶部var seriesColor='#000'：

将此新函数添加到代码中：

var seriesColor = '#000';
preprocessData = function (data, goal) {
    var nData = [];
    var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
    for (var i = 0; i < data.length; i++) {
        if (data[i] >= goal[i]) { colorUse = colorGood; }
        else { colorUse = colorBad; }
        nData.push({
            y: data[i],
            x: i,
            color: colorUse
        });
    }
    seriesColor = colorUse;
    return nData;
};

---

我更新了你的小提琴

非常好，谢谢。为什么系列中的color属性不能将所有的条更改为该颜色？这不是问题。我不知道为什么颜色不是自动的，我自己在过去也遇到过这个问题，我发现唯一的解决办法是明确指定每种颜色。很高兴我能帮忙。

var seriesColor = '#000';
preprocessData = function (data, goal) {
    var nData = [];
    var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
    for (var i = 0; i < data.length; i++) {
        if (data[i] >= goal[i]) { colorUse = colorGood; }
        else { colorUse = colorBad; }
        nData.push({
            y: data[i],
            x: i,
            color: colorUse
        });
    }
    seriesColor = colorUse;
    return nData;
};

  series: [ {
      type: 'column',
      name: currentName,
      data: preprocessData(current, goal),
      color: seriesColor,
      ...