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> < ...
随机推荐
- windows程序设计获取文本框(窗口、对话框)文本
就是这样一个简单的界面,窗口上重绘的对话框(这种写法参考我之前博文): 需要做到的就是点击确定,获取文本框中内容. // 处理对话框消息 INT_PTR CALLBACK NewDlgProc(HWN ...
- exif.js 旋转图片
还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo: 链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm 不要忽视demo中的s ...
- Model和ModelAndView
在请求处理方法可出现和返回的参数类型中,最重要的就是Model和ModelAndView.对于MVC框架,控制器Controller执行业务逻辑,用于产生模型数据Model,而试图View则用于渲染模 ...
- Round trip 流程图
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!
- 原生JS实现图片轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java设计模式——代理模式
public interface People { public void work(); } public class RealPeople implements People { public v ...
- 洛谷 [P2766] 最长不下降子序列问题
啊啊啊,再把MAXN和MAXM搞反我就退役 层次图求不相交路径数 第一问简单DP 第二问想办法把每一个不上升子序列转化成DAG上的一条路径,就转换成了求不相交路径数 因为每一个数只能用一次,所以要拆点 ...
- SpringMVC源码之参数解析绑定原理
摘要 本文从源码层面简单讲解SpringMVC的参数绑定原理 SpringMVC参数绑定相关组件的初始化过程 在理解初始化之前,先来认识一个接口 HandlerMethodArgumentResolv ...
- 使用requireJS
什么是require? require是AMD模块化规范的具体实现. 目前,通行的js模块化规范有两种,CommonJS和AMD. CommonJS和AMD有什么不同呢? CommonJS主要用于服务 ...
- Hive metastore源码阅读(二)
最近随着项目的深入,发现hive meta有些弊端,就是你会发现它的元数据操作与操作物理集群的代码耦合在一起,非常不利于扩展.比如:在create_table的时候同时进行路径校验及创建,如下代码: ...