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

时间:2018-01-03 19:25:07

标签: css3 highcharts

我在angular2中有一个带有导航按钮的angular2圆环图:默认为#003399 图例页面导航中活动向上或向下箭头的颜色。正如高级图表的API参考中所建议的那样 - highchart api link

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

下面是我的代码 -

  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
            }]
        };

    }

1 个答案:

答案 0 :(得分:1)

在图例对象中,只需添加导航对象:

-O2

http://jsfiddle.net/dksydn6m/

我选择了命名颜色,因为我很懒。六角色也在那里工作(#ffc0cb)。