Highcharts 饼图 文字颜色设置

 

领导说，每个饼图对应的提示文字颜色要与饼图一样。没办法了，去看了api，没找到相关的说明。没办法了，只能求助百度了。看到有人一篇文章说Highcharts有自己自定义的默认颜色colors(参考：http://www.cnblogs.com/jsonzheng/archive/2011/07/08/2101067.html)，顿时有办法了，根据饼图文字提示文字plotOptions下的dataLabels是用来显示文字的，我采用以下方法实现了，如下：

plotOptions: {

               pie: {

                   allowPointSelect: true,

                   cursor: 'pointer',

                   dataLabels: {

                       enabled: true,

                       connectorColor: '#4572A7',

                       style: {

color: '#333333',

fontSize: '11pt',

padding: '4px'

},

                       formatter: function() {

                        if(this.point.name == '社会管理类'){

                        return "<span style='color:#4572A7'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '建设交通类'){

                        return "<span style='color:#AA4643'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '经济综合类'){

                        return "<span style='color:#89A54E'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '科教文卫类'){

                        return "<span style='color:#80699B'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '公安政法类'){

                        return "<span style='color:#3D96AE'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '安全监管类'){

                        return "<span style='color:#DB843D'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '公用事业类'){

                        return "<span style='color:#92A8CD'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else if(this.point.name == '社会团体类'){

                        return "<span style='color:#A47D7C'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }else{

                        return "<span style='color:#B5CA92'><b>"+ this.point.name +'</b>:'+ Highcharts.numberFormat(this.percentage, 2) +'% ('+

                        Highcharts.numberFormat(this.y, 0, ',') +' 个)</span>';

                        }

                       }

                   }

               }

           },

以上采用了Highcharts默认的颜色设置方案，自定义一个span标签，颜色使之与Highcharts默认的颜色数组一一对应。缺点是，你必须知道每个饼图对应的分类this.point.name名称，不过还是实现了饼图的功能