HighCharts之2D柱状图、折线图的组合双轴图

1、实例源码

DoubleAxis.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(){
    	 $('#doubleColumnLineChart').highcharts({
    		 chart: {
                 zoomType: 'xy'
             },
             title: {
                 text: '某城市的月平均温度和降雨量'
             },
             xAxis: [{
                 categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
             }],
             yAxis: [{ // 主Y轴
                 labels: {
                     format: '{value}°C',
                     style: {
                         color: '#89A54E',
                         fontSize: '12px'
                     }
                 },
                 title: {
                     text: '温度',
                     style: {
                         color: '#89A54E',
                         fontSize: '12px'
                     }
                 }
             }, { // 次Y轴
                 title: {
                     text: '降雨量',
                     style: {
                         color: '#4572A7'
                     }
                 },
                 labels: {
                     format: '{value} mm',
                     style: {
                         color: '#4572A7'
                     }
                 },
                 opposite: true
             }],
             tooltip: {
                 shared: true
             },
             legend: {
                 layout: 'vertical',
                 align: 'left',
                 x: 120,
                 verticalAlign: 'top',
                 y: 100,
                 floating: true,
                 backgroundColor: '#FFFFFF'
             },
             series: [{
                 name: '降雨量',
                 color: '#4572A7',
                 type: 'column',
                 yAxis: 1,
                 data: [9.9, 51.5, 16.4, 129.2, 44.0, 76.0, 35.6, 148.5, 116.4, 104.1, 95.6, 154.4],
                 tooltip: {
                     valueSuffix: ' mm'
                 }

             }, {
                 name: '温度',
                 color: '#89A54E',
                 type: 'spline',
                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 35.2, 26.5, 13.3, 18.3, 13.9, 2.6],
                 tooltip: {
                     valueSuffix: '°C'
                 }
             }]
         });
     });
</script>
</head>
<body>
   <div id="doubleColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

HighCharts之2D柱状图、折线图的组合双轴图的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  3. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 如何拼接FusionCharts的JSON格式的双轴图

    1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ...

  5. pyhton中matplotlib箱线图的绘制（matplotlib双轴图、箱线图、散点图以及相关系数矩阵图)）

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

  6. Echarts双轴图的配置.

    在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参 ...

  7. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  8. MeteoInfoLab脚本示例：多Y轴图

    数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...

  9. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

随机推荐

  1. mysql5.6默认情况下内存占用太大

    下载了mysql5.6.12 ,默认占用内存达400多M,  而原来使用的5.0 只有30M.. 解决方案:调整以下参数----------------performance_schema_max_t ...

  2. BZOJ 2006: [NOI2010]超级钢琴 [ST表+堆 | 主席树]

    题意: 一个序列,求k个不相同的长度属于\([L,R]\)的区间使得和最大 前缀和,对于每个r找最小的a[l] 然后我yy了一个可持久化线段树做法...也许会T 实际上主席树就可以了,区间k小值 然后 ...

  3. 夏令营提高班上午上机测试 Day 4 解题报告

    我要是没记错的话,今天的题难度算挺适中的. *标程来自高天宇哥哥 T1:小G的字符串 题目描述 有一天,小 L 给小 G 出了这样一道题:生成一个长度为 n 的.全由小写英文字母构成的字符串,只能使用 ...

  4. CA证书扫盲，https讲解。

    很多关于CA证书的讲解. 1.什么是CA证书. 看过一些博客,写的比较形象具体. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 B 公司的所有 ...

  5. asp.net core 使用html文件

    在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台 输入install-package Microsoft.aspnetcore.sta ...

  6. 配置 github 上的程序

    最近学习的node.vue的单页模式,看到github (地址:https://github.com/bailicangdu/node-elm)上面有大神做了一个几十页的系统,心想怎么弄到本地研究下 ...

  7. phpMyAdmin的使用

    phpMyAdmin的使用 安装MySQL数据库后,用户即可在命令行提示符下进行创建数据库和数据表等各种操作,但这种方法非常麻烦,而且需要有专业的SQL语言知识.PHP官方开发了一个类似于SQL Se ...

  8. configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    Apache在2.4版本以后,编译时: # ./configure \ --prefix=/usr/local/apache2 \ --with-included-apr \ --enable-so ...

  9. 在tableViewCell的点击事件中处理界面跳转问题

    UIViewController *controller; UIView *view = self.view; while (1) { controller = (UIViewController * ...

  10. dedecms调用文章内容

    使用织梦建站时,有时候需要调用某一文档的内容,但织梦默认没有相应的标签,这时就需要我们使用sql语句去抓取了. {dede:sql sql="SELECT aid,typeid,body F ...