HighCharts之2D颜色阶梯饼图
HighCharts之2D颜色阶梯饼图
1、实例源码
PieGradient.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D颜色阶梯饼图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/js/highcharts.js"></script> <script type="text/javascript"> $(function(){ // Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { return { radialGradient: { cx: 0.8, cy: 0.5, r: 0.6 }, stops: [ [0, color], [1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken ] }; }); // 构建饼图 $('#pieChart').highcharts({ chart: { plotBackgroundColor: '#CCCCCC', plotBorderWidth: '20px', plotShadow: true }, title: { text: '2013年年收入' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#0000FF', connectorColor: '#00FF00', formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } } } }, series: [{ type: 'pie', name: '收入比例', data: [ ['一月', 5487], ['二月', 8745], ['三月', 3451], ['四月', 9845], ['五月', 6451], ['六月', 7412], { name: '七月', y: 8888, sliced: true, selected: true }, ['八月', 4151], ['九月', 5421], ['十月', 6545], ['十一月', 3545], ['十二月', 8541] ] }] }); }); </script> </head> <body> <div id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></div> </body> </html>
2、实例结果
HighCharts之2D颜色阶梯饼图的更多相关文章
- HighCharts之2D饼图
HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...
- HighCharts之2D对数饼图
HighCharts之2D对数饼图 1.实例源码 LogarithmicPie.html: <!DOCTYPE html> <html> <head> <me ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- HighCharts之2D带有Legend的饼图
HighCharts之2D带有Legend的饼图 1.实例源码 PieLegend.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图
1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...
- HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...
- HighCharts之2D堆面积图
HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...
- HighCharts之2D含有负值的面积图
HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...
- HighCharts之2D带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
随机推荐
- XAML: 自定义控件中事件处理的最佳实践
在开发 XAML(WPF/UWP) 应用程序中,有时候,我们需要创建自定义控件 (Custom Control) 来满足实际需求.而在自定义控件中,我们一般会用到一些原生的控件(如 Button.Te ...
- JSP自定义标签就是如此简单
tags: JSP 为什么要用到简单标签? 上一篇博客中我已经讲解了传统标签,想要开发自定义标签,大多数情况下都要重写doStartTag(),doAfterBody()和doEndTag()方法,并 ...
- Effective Java 之-----返回零长度的数组或集合而不是null
如下代码,通常用户列表为空时,会习惯性返回null,因为这时会认为:null返回值比零长度数组更好,因为它避免了分配数组所需要的开销. private final List<UserBean&g ...
- 解决spring-boot启动中碰到的问题:Cannot determine embedded database driver class for database type NONE
问题 如下: 2017-07-16 08:50:57.436 INFO 13524 --- [ main] c.p.p.web.PointshopWebApplication ...
- 安装nginx-1.5.2
新建用户及用户组groupadd webuseruseradd -g webuser webuser 下载nginx-1.5.2 下载地址:http://pan.baidu.com/s/1gd1khc ...
- ubuntu 新手入门第一天
在虚拟机上安装好linux之后,当前版本 ubuntu-16.04.3-desktop-amd64.iso 1. 设置root用户名和密码 sudo passwd 然后输入两次密码 2. 设置软件源 ...
- web.xml组件加载顺序
在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. 经过查阅和Debug发现, web.x ...
- [偏序关系与CDQ分治]【学习笔记】
组合数学真是太棒了 $CDQ$真是太棒了(雾 参考资料: 1.<组合数学> 2.论文 课件 很容易查到 3.sro __stdcall 偏序关系 关系: 集合$X$上的关系是$X$与$X$ ...
- C++数据结构学习之顺序表
顺序表是数据结构中最基本也是应用相当广泛的一种数据结构类型.它通常包含三个私有成分,即指向数据数组的头指针.当前表长以及表的实际容量.表的头指针通常指向数据数组的基地址,通过数组的形式进行访问数据数组 ...
- php header解决跨域问题
header('Access-Control-Allow-Credentials:true'); header('Access-Control-Allow-Origin:http://wdjkj.co ...