HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图
1、HighCharts之2D数值带有百分数的面积图源码
AreaPercentage.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(){ $('#percentageAreaChart').highcharts({ chart: { type: 'area' }, title: { text: '2013年水果销售量' }, subtitle: { text: '水果销量' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'], tickmarkPlacement: 'on', title: { enabled: true } }, yAxis: { title: { text: '百分比(%)' } }, tooltip: { pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} kg)<br/>', shared: true }, plotOptions: { area: { stacking: 'percent', lineColor: '#ffffff', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#ffffff' } } }, series: [{ name: '苹果', data: [561, 145, 365, 879, 1245, 345, 268,654,945,451,615,341] }, { name: '梨子', data: [306, 207, 451, 654, 354, 245, 874,652,478,984,875,243] }, { name: '橘子', data: [156, 421, 214, 754, 410, 623, 894,451,652,874,356,524] }, { name: '荔枝', data: [851, 331, 554, 245, 439, 718, 245,653,451,698,321,684] }, { name: '草莓', data: [245, 352, 852, 746, 313, 430, 246,895,675,235,654,745] }] }); }); </script> </head> <body> <div id="percentageAreaChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、运行结果
HighCharts之2D数值带有百分数的面积图的更多相关文章
- 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面积图
HighCharts之2D面积图 1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...
- 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带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- HighCharts之2D堆柱状图
HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...
- HighCharts之2D条状图
HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...
随机推荐
- Python函数可变参数*args及**kwargs详解
初学Python的同学们看到代码中类似func(*args, **kwargs)这样的函数参数定义时,经常感到一头雾水. 下面通过一个简单的例子来详细解释下Python函数可变参数*args及**kw ...
- Lucene.net(4.8.0) 学习问题记录五: JIEba分词和Lucene的结合,以及对分词器的思考
前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...
- 闭包(流畅的python 学习笔记)
什么是闭包 其实,闭包指延伸了作用域的函数,其中包含函数定义体中引用.但是不在定义体中定义的非全局变量.函数是不是匿名的没有关系,关键是它能访问定义体之外定义的非全局变量. 示例 7-8 averag ...
- 洛谷 [P2296] 寻找道路
反向BFS预处理,求出所有符合题意的点,再正向BFS,(注意对于边权恒为一的点,BFS,比SPFA高效) 输入时n与m分清 #include <iostream> #include < ...
- 对.Net Core结合Docker和Jexus的实践
本文基于上次尝试之后的进一步尝试,加入Docker容器.编写Dockerfile,并且jexus结合Docker的使用,总结下自己的个人感想. 一.环境介绍 当前的场景有两种方式将Demo实现运行,一 ...
- php+redis 学习 三 乐观锁
<?php header('content-type:text/html;chaeset=utf-8'); /** * redis实战 * * 实现乐观锁机制 * * @example php ...
- Go学习笔记01-语言
1.1 变量 Go 是静态类型语言,不能在运行期改变变量类型.使用关键字 var 定义变量,自动初始化为零值.如果提供初始化值,可省略变量类型,由编译器自动推断. var x int var f fl ...
- MySQL数据库基础(一)(启动/停止、登录/退出、语法规范及最基础操作)
1.启动/停止MySQL服务 启动:net start mysql 停止:net stop mysql 2.MySQL登录/退出 登录:mysql 参数:如果连接的是本地服务器,一般用命令:my ...
- LIMS系统仪器数据采集-使用xpdf解析pdf内容
不同语言解析PDF内容都有各自的库,比如Java的pdfbox,.net的itextsharp. c#解析PDF文本,关键代码可参考: http://www.cnblogs.com/mahongbia ...
- Spring-mvc 静态资源不拦截
在Spring-mvc.xml文件中加入这个就可以了 <!-- 用于对静态文件进行解析 --> <mvc:annotation-driven /> <mvc:resour ...