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 ...
随机推荐
- padding和margin的区别
简单来说,padding就是内边距,margin就是外边距如下图: margin和padding的区别用图表示为:
- 去除inline-block之间的间距
a标签的父容器添加: font-size: 0; -webkit-text-size-adjust:none;
- JSP目录
JSP目录 课时1 jsp概述和背后原理31:11 课时2 三种jsp的scriptlet语法27:29 课时3 jsp的注释14:00 课时4 JSP4个域对象的作用域3 ...
- python安装使用talib
安装主要在http://www.lfd.uci.edu/~gohlke/pythonlibs/这个网站找到 按照需要的python版本和平台位数下载,然后直接用pip install 进行安装 包含的 ...
- windows qt 编译 boost 添加 路径
win32-msvc2015: { contains(QMAKE_HOST.arch, x86):{ INCLUDEPATH += D:\3SDK\boost_1_61_0 LIBS += -LD:\ ...
- aa12
option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: '模拟迁徙', subtex ...
- java面试中问题
HashMap数据结构 http://blog.csdn.net/weiyouyin/article/details/5693496 HashMap冲突 http://www.blogjava.net ...
- 二 Java利用等待/通知机制实现一个线程池
接着上一篇博客的 一Java线程的等待/通知模型 ,没有看过的建议先看一下.下面我们用等待通知机制来实现一个线程池 线程的任务就以打印一行文本来模拟耗时的任务.主要代码如下: 1 定义一个任务的接口 ...
- 数据库(SQL SERVER)常用知识点
1,连接数据库字符串 Data Source=192.168.1.249;Initial Catalog=bbx_uf_jiekou;User ID=sa;Password=123 Data Sour ...
- mysql解压缩安装(一)
MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...