highstock的两个Y轴柱状、曲线混合图

最新推荐文章于 2022-02-24 12:34:35 发布
最新推荐文章于 2022-02-24 12:34:35 发布
阅读量95 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yueyanxuelang/p/5370144.html
版权 
<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="highstock.js"></script>
  <script>
   $(function () {
        // Create the chart
        $('#container').highcharts('StockChart', {
			chart: {
				zoomType: 'xy'
			},
			 title: {
                text: 'AAPL Stock Price'
            },
			xAxis: [{
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
			}],
			yAxis: [{ // Primary yAxis
				labels: {
					format: '{value}°C',
					style: {
						color: '#89A54E'
					}
				},
				title: {
					text: 'Temperature',
					style: {
						color: '#89A54E'
					}
				},
				opposite: false
			}, { // Secondary yAxis
				title: {
                text: 'Rainfall',
					style: {
						color: '#4572A7'
					}
				},
				labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
				},
				opposite: true
		   }],
			tooltip: {
				shared: true
			},
			legend: {
				enabled: true,
				align: 'center',
				backgroundColor: '#FCFFC5',
				borderColor: 'black',
				borderWidth: 2,
				shadow: true
			},
		    rangeSelector: {
				height: 10,
				buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
				buttonTheme: { // styles for the buttons
					fill: 'none',
					stroke: 'none',
					'stroke-width': 0,
					r: 8,
					style: {
						color: '#039',
						fontWeight: 'bold'
					},
					states: {
						hover: {
						},
						select: {
							fill: '#039',
							style: {
								color: 'white'
							}
						}
						// disabled: { ... }
					}
				},
				inputBoxBorderColor: 'gray',
				inputBoxWidth: 120,
				inputBoxHeight: 18,
				inputStyle: {
					color: '#039',
					fontWeight: 'bold'
				},
				labelStyle: {
					color: 'silver',
					fontWeight: 'bold'
				},
				 //inputEnabled: false, // it supports only days
					//selected : 4 // all
				selected: 1
			},
		scrollbar: {
			enabled: true,
			height: 10,
            barBackgroundColor: 'gray',
            barBorderRadius: 7,
            barBorderWidth: 0,
            buttonBackgroundColor: 'gray',
            buttonBorderWidth: 0,
            buttonArrowColor: 'yellow',
            buttonBorderRadius: 7,
            rifleColor: 'yellow',
            trackBackgroundColor: 'white',
            trackBorderWidth: 1,
            trackBorderColor: 'silver',
            trackBorderRadius: 7
        },
		navigator: {
			//enabled : false
            height: 10
			},
        series: [{
            name: 'Rainfall',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }
        }, {
            name: 'Rainfall2',
            color: '#7772A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Rainfall3',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        },{
            name: 'Rainfall4',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        },{
            name: 'Rainfall5',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        },{
            name: 'Rainfall6',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
			name: 'Temperature',
            color: '#89A54E',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9 ,9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
			name: 'Temperature2',
            color: '#66114E',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,9.6],
            tooltip: {
                valueSuffix: '°C'
			}
		}, {
			name: 'Temperature3',
            color: '#89A54E',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
			name: 'Temperature4',
            color: '#666666',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
			name: 'Temperature5',
            color: '#777777',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,9.6],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
			name: 'Temperature6',
            color: '#888888',
            type: 'line',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,9.6],
            tooltip: {
                valueSuffix: '°C'
            }
		}],
		credits: {
            enabled: false
        }          
        });
    });
  </script>
</head>
<body>
  <div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/yueyanxuelang/p/5370144.html

weixin_30625691
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HightCharts双y轴+x时间轴
zuofengnihao的博客
04-13 1512
公司布置完成图表 使用HightCharts显示 根据时间显示探头点数据 由于探头分为两种数据属性 一种是温度（单位℃） 一种是湿度（单位%）所以需要使用双纵轴显示 加上横轴使用date属性 需要对date进行formart 上代码：$('#myContainer').highcharts({ chart: { zoomType: 'xy', ...
用python建立两个Y轴的XY曲线图方法
09-19
今天小编就为大家分享一篇用python建立两个Y轴的XY曲线图方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
highcharts 双Y轴，实现第二个数据与右侧轴对应
我爱美女S的博客
02-24 1711
在series里给第二个数据加上yAxis: 1,即可
Highcharts 双Y轴, 柱形图，线条图组合
实践求真知
12-24 1690
一 代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Highcharts 双Y轴, 柱形图，线条图组合&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&
当highstock图表默认要显示多个
qq_42750608的博客
03-02 624
1.当highstock图表是默认很多个的时候 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
09-19
今天小编就为大家分享一篇python绘制双Y轴折线图以及单Y轴双变量柱状图的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Python matplotlib 绘制双Y轴曲线图的示例代码
09-16
Matplotlib是非常强大的python画图工具，这篇文章主要介绍了Python matplotlib 绘制双Y轴曲线图,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
使用QCustomplot完成多Y轴曲线绘制
02-03
每个QCPAxisRect可以有自己的X轴和Y轴，因此可以独立控制每条曲线的Y轴。首先，我们需要创建主QCPAxisRect，然后为每个额外的Y轴创建新的QCPAxisRect，并将其附加到主QCPAxisRect的右侧或左侧。 2. **添加多条Y轴...
HighCharts设置多个Y轴 Y轴位置
dusea的博客
10-03 6572
转自http://blog.sina.com.cn/s/blog_6a53599101019qax.html 多个Y轴的实现方法在于把yAxis设置成一个数组，里面的一个对象代表一条Y轴，利用opposite:true来表示是否跟默认位置相反，默认Y轴的位置在图形左边，（如果想把Y轴放在左边就把这句话取消掉，想把Y轴放在右边就加上opposite:true）series中通过对每个series设
动态渲染多个重复的Highcharts图表
在路上`的博客
10-22 749
需求：实现多个动态图表 示例 准备工作 需要提前引入所需要的css，js等插件文件，可参考Highcharts官网实例 /* *boardBuildingInCommunityMap为接口返回的数据 * buildFeeArr[i] = [] 为重要步骤，清空每个图表中重复的数组 * buildFeeArr[i].push(buildFeeObj) 给每条数据假如不同的动态数据 * buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemId
highcharts混合图
深藏功与名2019/06/06
10-28 1047
highcharts具体内容详见：http://www.hcharts.cn/demo/highcharts 心得： 不要全看他们API 看一下他的使用教程之后 直接根据你的需要看例子 对应去看API 不要API一个一个看 半天就可以上手 html> html lang="en"> head> meta charset="UTF-8"> title>T
highstock图表的数据生成highcharts图表
qq_42750608的博客
03-12 436
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;highstock时间
Highcharts多个Y轴动态显示时，yAxis坐标的双重显示
热门推荐
Lyndon的专栏
09-01 2万+
伟大的程序员都是从套页面开始的。 1.只显示一个Primer yAxis坐标，不现实其他的坐标尺如图： 此时，只需要在series加一个yAxis: 1的属性即可。应该说来，这个设置的属性不在yAxis中设置，而是在series中设置，这里的设定并不合理。$(function () { $('#container').highcharts({ chart: {
Highcharts的使用（2个Y轴&折线图）
weixin_33874713的博客
11-10 1004
2019独角兽企业重金招聘Python工程师标准>>> ...
highcharts 多Y轴， 柱状、折现 混合图
Ellie
07-27 908
这里是在官网的例子中改写的，可以把代码粘贴进去就可以看到效果。 var chart = Highcharts.chart('container', { // title: { // text: '2010 ~ 2016 年太阳能行业就业人员发展情况' // }, xAxis:{ categories: ['2018-01', '2018-02',...
matplotlib两个柱状图两个y轴
最新发布
06-28
4. 使用ax1和ax2分别绘制两组数据对应的柱状图，并分别通过set_ylabel()方法设置两个y轴的标签。 ```python ax1.bar(x, y1, color='b') ax1.set_ylabel('y1') ax2.bar(x, y2, color='r') ax2.set_ylabel('y2') ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值