Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '各练案等级分布'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
colors:['#4dd3b9','#fdd67f','#ffaca8','#64bcec'],
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
dataLabels: {
enabled: true,
formatter: function() {
if(this.point.name == '初级'){
return '<span style="color:#4dd3b9">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '中级'){
return '<span style="color:#fdd67f">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '高级'){
return '<span style="color:#ffaca8">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}else if(this.point.name == '不分等级'){
return '<span style="color:#64bcec">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
}
}
}
}
},
series: [{
type: 'pie',
name: '占比',
data: [
['初级', 46],
['中级', 29],
['高级', 15],
['不分等级',39]
]
}]
});
});
效果图:

Highcharts 饼图 文字颜色设置的更多相关文章
- iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮
一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...
- vc设置按钮文字颜色
设置按钮文字颜色使用 CMFCBUTTON即可 在OnInitDialog函数加入如下内容即可 ((CMFCButton*)GetDlgItem(IDC_MFCBUTTON1))->SetTex ...
- 设置TabBarItem选中时的图片及文字颜色
TabBarItem选中时,默认文字和图片都变为蓝色.使用以下代码可以进行修改. MainViewController *mainVC = [[MainViewController alloc] in ...
- HighCharts之2D颜色阶梯饼图
HighCharts之2D颜色阶梯饼图 1.实例源码 PieGradient.html: <!DOCTYPE html> <html> <head> <met ...
- 设置LISTControl控件某一行的背景和文字颜色
定义宏 用listcontrol的SetItemData设置某一行的属性,通过自定义属性标识实现. 自定义某行内容颜色属性: #define COLOR_DEFAULT 0 //默认颜色 #defin ...
- android TextView 设置部分文字背景色和文字颜色
通过SpannableStringBuilder来实现,它就像html里边的元素改变指定文字的文字颜色或背景色 public class MainActivity extends Activity { ...
- android TextView 设置部分文字背景色 和 文字颜色
通过SpannableStringBuilder来实现,它就像html里边的元素改变指定文字的文字颜色或背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- 【Winform-GataGridView】根据DataGridView中的数据内容设置行的文字颜色、背景色 — 根据状态变色
C#中可以根据每行内容的不同来对DataGridView数据表格控制每行的文字颜色.背景颜色进行不同的设置. 效果如下: 实现: 在DataGridView的RowPrePaint事件中进行行颜色控制 ...
- NumberPicker设置宽度,设置文字颜色
修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...
随机推荐
- GUI的搭建,windowbuilder的使用
在进行GUI的搭建过程中,相信很多人对于一个图标的设置感觉写起来很麻烦,需要不断的添加,而在java中有一个windowbuilder窗口可以很好的帮助我们进行GUI的搭建 1.进入eclipse的页 ...
- redis集群安装
1.普通安装 安装环境 centos 6.8 1.安装必要包 yum install gcc yum -y install wget 2.下载解压 wget http://download.redis ...
- Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的关系
转载请包含网址:http://blog.csdn.net/pathuang68/article/details/7351317 一.Surface Surface就是“表面”的意思.在SDK的文档中, ...
- ctrip
#-*-coding:utf8-*-from lxml import etreeimport requestsimport re#编码转换import sysreload(sys)sys.setdef ...
- 第一节(配置springmvc环境)学习尚硅谷-springmvc视频教程
之前,一直从事C#开发.后来,公司调整后领导决定使用java开发,因此需要收集相关学习资料.该视频教程比较入门,也适合自己,于是边看边写的同时再总结一下便于自己牢记,遇到分歧不对之处望指正. 开发环境 ...
- easyui form表单提交应注意的问题
今天在一个项目中用到表单提交,代码如下: $('#CreateForm').form('submit', { onSubmit: function () { ajaxCreateFrom(this, ...
- javascript里的继承
js里面继承的方式, 1. 类式继承,通过构造函数的继承 function extend(subClass, superClass){ var F = function(){}; F.prototyp ...
- 1336 - Sigma Function---LightOj1336
http://lightoj.com/volume_showproblem.php?problem=1336 题目大意:求1到n之间的数因子和是偶数有几个对于任意一个x, 都有x = p1^a1*p2 ...
- nginx下搭建 Yii框架
因为启用了rewrite,导致css,js,images等静态文件也定向到index.php 我不得不重定向静态文件的路径 仅供参考: server { listen 80; server_name ...
- LoopBackJS 之 文件上传下载——使用loopback-component-storage
参考链接: http://loopback.io/doc/en/lb2/Storage-component.html#creating-a-storage-component-data-source ...