HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图、折线图的组合多轴图
1、实例源码
SomeAxis.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(){ $('#someColumnLineChart').highcharts({ chart: { zoomType: 'xy' }, title: { text: '某城市有关气候参数' }, xAxis: [{ categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'] }], yAxis: [{ // 主Y轴 labels: { formatter: function() { return this.value +'°C'; }, style: { color: '#89A54E' } }, title: { text: '温度', style: { color: '#89A54E' } }, opposite: true }, { // 次Y轴 gridLineWidth: 0, title: { text: '降雨量', style: { color: '#4572A7' } }, labels: { formatter: function() { return this.value +' mm'; }, style: { color: '#4572A7' } } }, { // 第三级Y轴 gridLineWidth: 0, title: { text: '气压', style: { color: '#AA4643' } }, labels: { formatter: function() { return this.value +' mb'; }, style: { color: '#AA4643' } }, opposite: true }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalAlign: 'top', y: 80, floating: true, backgroundColor: '#FFFFFF' }, series: [{ name: '降雨量', color: '#4572A7', type: 'column', yAxis: 1, data: [50.9, 71.5, 96.4, 129.2, 144.0, 106.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.8], tooltip: { valueSuffix: ' mm' } }, { name: '气压', type: 'spline', color: '#AA4643', yAxis: 2, data: [1015, 1012, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1015.1, 1016.9, 1008.2, 1026.7], marker: { enabled: false }, dashStyle: 'shortdot', tooltip: { valueSuffix: ' mb' } }, { name: '温度', color: '#89A54E', type: 'spline', data: [3.0, 6.8, 11.5, 16.5, 18.2, 22.5, 28.2, 36.5, 23.3, 18.3, 13.9, 2.6], tooltip: { valueSuffix: ' °C' } }] }); }); </script> </head> <body> <div id="someColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、实例结果
HighCharts之2D柱状图、折线图的组合多轴图的更多相关文章
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- HighCharts之2D柱状图
1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...
- MeteoInfoLab脚本示例:多Y轴图
数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...
- FusionCharts 2D柱状图和折线图的组合图调试错误
在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...
- FusionCharts 2D柱状图和折线图的组合图
1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...
- HighCharts之2D带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
- HighCharts之2D折线图
HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
随机推荐
- Python self学习
最开始学习Python时,用的IDE是IDEL,看的教程是<简明Python教程>,强烈推荐一下,讲得还是很不错的,适合新手学习 http://www.kuqin.com/abyteofp ...
- datatables里面的search怎么去掉?
今天使用datatables插件的时候,由于需求是把自带的search去掉,并且给输入框加上placeholder="Search",使其看起来更简洁美观,于是乎简单粗暴的把代码改 ...
- Restful、Jersey和JAX-RS
一:MVC与SpringMVC MVC:是一种思想,是一种设计模式 SpringMVC:是一个框架,实现了MVC这种思想. 之前:写JSP页面,比较繁琐.eg:在页面显示用户列表,我们会在JSP页面 ...
- BZOJ 1018: [SHOI2008]堵塞的交通traffic [线段树 区间信息]
1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 3064 Solved: 1027[Submi ...
- IntelliJ IDEA使用心得之基础篇
今天和大家分享一个非常好用的Java开发工具-IntelliJ IDEA. 下载地址:https://www.jetbrains.com/idea/ 目录: 1)IntelliJ IDEA使用心得之基 ...
- iOS通知传值的使用
通知 是在跳转控制器之间常用的传值代理方式,除了代理模式,通知更方便.便捷,一个简单的Demo实现通知的跳转传值. 输入所要发送的信息 ,同时将label的值通过button方法调用传递, - (IB ...
- PHPUnit-附录 B. 标注
[http://www.phpunit.cn/manual/5.7/zh_cn/appendixes.annotations.html] 所谓标注,是指某些编程语言中允许加在源代码中的一种特殊格式的语 ...
- ★MySQL一些很重要的SQL语句
[mysqldumpslow] -s 排序选项:c 查询次数 r 返回记录行数 t 查询时间 -t 只显示top n条查询 mysqldumpslow -s r -t 10000 slow-que ...
- linux文件权限查看及修改-chmod ------入门的一些常识
查看Linux文件的权限:ls -l 文件名称查看linux文件夹的权限:ls -ld 文件夹名称(所在目录)修改文件及文件夹权限:sudo chmod -(代表类型)×××(所有者)×××(组用户) ...
- 解决CXF的java.io.FileNotFoundException: class path resource [META-INF/cxf/cxf-extension-soap.xml] cannot be opened because it does not exist
以下是错误信息 九月 25, 2017 8:22:04 下午 org.springframework.web.context.support.XmlWebApplicationContext prep ...