Css 更改highcharts图例页面导航按钮的颜色

我有一个angular2格式的甜甜圈图表，导航按钮为activeColor：默认为#003399 图例页面导航中活动的向上或向下箭头的颜色。正如highcharts的API参考中所建议的那样-

我必须将导航按钮的颜色从默认值更改为适合我需要的其他颜色。当前在我的代码中，导航没有定义。它采用导航按钮的默认值。当我尝试检查当前的导航按钮时，它显示- 有关如何更改导航按钮默认颜色的任何帮助

下面是我的代码-

  defaults() {
        this.options = {

            title: { text: ' ' },
            colors: ['rgba(79, 162, 189, 1)', 'rgba(84, 135, 201, 1)', 'rgba(143, 185, 91, 1)', 'rgba(90, 183, 130, 1)', 'rgba(71, 195, 185, 1)', 'rgba(190, 120, 203, 1)', 'rgba(228, 211, 84, 1)', 'rgba(43, 144, 143, 1)', 'rgba(145, 232, 225, 1)'],
            chart: {
                type: 'pie',
                animation: true
            },
            credits: {
                enabled: false
            },
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 300
                    },
                    chartOptions: {
                        legend: {
                            align: 'center',
                            verticalAlign: 'bottom',
                            layout: 'vertical',
                            labelFormatter: function () {
                                return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
                                    '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                                    '</span></div> ';
                            }
                        },
                        pie: {
                            size: 50,
                            innerSize: 20
                        }
                    }
                }]
            },

            plotOptions: {
                pie: {
                    innerSize: '40%',
                    allowPointSelect: true,
                    slicedOffset: 0,                    
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },

                    showInLegend: true,                                   
                     point: {
                        events: {   

                        }

                        },
                    states: {
                        hover: {
                            halo: {
                                size: 0
                            },
                            enabled : true
                        }
                    }
                },

                series: {
                    animation: false,

                    }

                    },
      legend: {
                useHTML: true,
                enabled: true,
                align: 'right',
                verticalAlign: 'top',
                layout: 'vertical',
                symbolHeight: 12,
                itemMarginBottom: 1,
                symbolWidth: 25,
                symbolRadius: 1,
                labelFormatter: function () {
                    return '<div style="width:180px;"><div class="pull-left" style= "font-weight: 500; padding-bottom: 3px;padding-top:3px;  width: 130px; font-family:Helvetica; white-space: normal; word-break:break-word ">' + this.name +
                        '</div><span class="pull-right" style= "font-weight: 500; font-family: Helvetica" >' + this.value +
                        '</span></div> ';
                },
                title: {

                text: ' <span  style="font-size: 14px; color: black; font-weight: bold;font-family: Helvetica;" >' + this.donutChartInfo.legendTitle + '</span><br/><span style="font-size: 12px;cursor:pointer; color: black; font-weight: normal;font-family: Helvetica; margin-top: 5px;text-decoration-color: "#3572b0">Total: ' + this.donutChartInfo.count + '</span>'

                },
            },

            series: [{
                data: this.donutchartData,
                allowPointSelect: true
            }]
        };

    }

defaults（）{
此选项={
标题：{文本：'}，
颜色：['rgba（791621891）''rgba（84135201，1）''rgba（14318591，1）''rgba（90183130，1）''rgba（711951851）''rgba（190120203，1）''rgba（228211，84，1）''rgba（431441431）'rgba（145232，225，1）'，
图表：{
键入“pie”，
动画：真的
},
学分：{
已启用：false
},
响应：{
规则：[{
条件：{
最大宽度：300
},
图表选项：{
图例：{
对齐：'居中'，
垂直排列：“底部”，
布局：“垂直”，
labelFormatter:函数（）{
返回“”+此名称+
''+这个值+
' ';
}
},
馅饼：{
尺码：50，
内部尺寸：20
}
}
}]
},
打印选项：{
馅饼：{
内部尺寸：“40%”，
allowPointSelect:true，
切片偏移量：0，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：是的，
要点：{
事件：{
}
},
国家：{
悬停：{
光环：{
尺寸：0
},
已启用：true
}
}
},
系列：{
动画：错，
}
},
图例：{
是的，
启用：对，
对齐：“右”，
垂直排列：“顶部”，
布局：“垂直”，
符号高度：12，
项目MarginBottom:1，
符号宽度：25，
符号半径：1，
labelFormatter:函数（）{
返回“”+此名称+
''+这个值+
' ';
},
标题：{
文本：“”+this.donutChartInfo.legendTitle+”
在图例对象中，只需添加一个导航对象：

  legend: {
    useHTML: true,
    enabled: true,
    navigation: {
      activeColor: 'red',
      inactiveColor: 'pink'
    },


我之所以选择命名颜色，是因为我很懒。十六进制颜色在那里也有用（#ffc0cb）