HighCharts之2D饼图
HighCharts之2D饼图
1、 HighCharts之2D饼图源码
<!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(){ $('#pieChart').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: '2013年收入' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', name: '月收入占比', data: [ ['一月', 8956], ['二月', 5612], ['三月', 4515], ['四月', 9565], ['五月', 2356], ['六月', 4512], ['七月', 5623], ['八月', 1245], ['九月', 4578], ['十月', 8754], ['十一月',6231], ['十二月',5124] ] }] }); }); </script> </head> <body> <div id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、运行结果
HighCharts之2D饼图的更多相关文章
- 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颜色阶梯饼图
HighCharts之2D颜色阶梯饼图 1.实例源码 PieGradient.html: <!DOCTYPE html> <html> <head> <met ...
- 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 ...
随机推荐
- hexo 博客支持PWA和压缩博文
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed ...
- iOS-Runtime之关于页面跳转的捷径【Runtime获取当前ViewController】
写在前面 在我们操作页面跳转时,如果当前的类不是UIViewcontroller(下面用VC表示),你会不会写一个代理,或者block给VC传递信息,然后在VC里面进行 ///假如targetVc是将 ...
- xBIM 多个IFC文件合并
目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...
- es随想一
一.安全问题 前段时间网上看到的,大量的MongoDB服务器和ElasticSearch服务器被黑客攻击,留下勒索信息. ElasticSearch的2种客户端连接方式,transport方式默认的9 ...
- BZOJ 2839: 集合计数 [容斥原理 组合]
2839: 集合计数 题意:n个元素的集合,选出若干子集使得交集大小为k,求方案数 先选出k个\(\binom{n}{k}\),剩下选出一些集合交集为空集 考虑容斥 \[ 交集为\emptyset = ...
- CentOS上安装GitBlit服务
简单介绍 在上一篇文章中,已经简单的介绍了如何在CentOS的服务器上搭建git服务器.但是这种方式实现的服务器功能比较弱,操作起来也比较繁琐.在网上搜索了一圈,感觉Gitblit比较符合我的需求.接 ...
- 在 CentOS7.0 上搭建 Chroot 的 Bind DNS 服务器
BIND(Berkeley internet Name Daemon)也叫做NAMED,是现今互联网上使用最为广泛的DNS 服务器程序.这篇文章将要讲述如何在 chroot 监牢中运行 BIND,这样 ...
- CentOS利用Nginx+Docker部署.netcore应用
安装docker 官方文档https://docs.docker.com/engine/installation/linux/docker-ce/centos/ [root@sn ~]# yum re ...
- 一种解决eclipse中安装maven出错的方法
1.安装步骤:https://jingyan.baidu.com/article/a17d5285feb4dd8099c8f26e.html 2.安装第三步的解决办法:m2e 路径换成 http ...
- iOS视频直播
视频直播技术点 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, ...