领导说,每个饼图对应的提示文字颜色要与饼图一样。没办法了,去看了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名称,不过还是实现了饼图的功能
分享到:
相关推荐
highcharts饼图字段过长超出解决,代码明了,操作简单
主要介绍了Javascript highcharts 饼图显示数量和百分比实例代码的相关资料,这里附有实例代码,需要的朋友可以参考下
highcharts简单的饼图demo,按照需求更改
利用highCharts绘制饼图和柱状图
highcharts 与 struts2 完美整合,解决部分新手对于操作highcharts的误区,本例子无需连接数据库,在strust2 Action中创建模拟数据,以json的方式返回到前台js,highcharts通过解析json,进而完成数据的装配,且可以...
一个页面,两个双饼图,至于双饼图长什么样,自己去官网查看
Highcharts 写 venn图 (韦恩图),以及解决项目中venn的报错,Highcharts 写 venn图 鼠标悬浮效果以及点击事件
NULL 博文链接:https://201108223725.iteye.com/blog/2173123
Highcharts 饼图 下表列出了 Highcharts 不同类型的饼图: 序号 图表类型 1 基本饼图 2 显示图例饼图 3 圆环图 4 半圈圆环图 5 向下钻取饼图 6 渐变饼图 7 单色饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D...
带例子,将原来单色变为渐变色,运行电脑时间,不超过2015年1月
php饼图 jquery饼图 highcharts
ASP.NET 做的3D饼图。 可以2D、3D互转换。 具体代码自己可以看下,做适当的修改。 只是把代码贴出来了。
含HighCharts.js文档,可用于引用设计折线图、柱状图、饼图等
最近做HightCharts,需要从后台获取数据。但是网上的例子互相抄袭,多数是后台...本例子是用asp.net webform实现后台获取Json数据,同时展示为HighCharts饼图。相信聪明的你能够同样写出mvc或者其他图标的模拟代码。
使用highcharts实现饼图和曲线图的展示
jquery Highcharts jquery Highcharts jquery Highcharts