HighCharts实现双Y轴
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HC._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="HighChart/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="HighChart/highcharts.js" type="text/javascript"></script>
<script src="HighChart/theme/grid.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container', //放置图表的容器
plotBackgroundColor: null,
plotBorderWidth: null,
zoomType: 'xy' //支持图表放大缩小的范围
},
title: {
text: '支持放大功能的双Y轴线性柱状混合图以及自行格式化y轴刻度示例'
},
subtitle: {
text: '短信发送数与成功率'
},
xAxis: [{
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
labels: {
rotation: -, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
}],
yAxis: [{ // Primary yAxis
title: {
text: '成功率 (%)',
style: {
color: '#89A54E'
}
},
labels: {
format: '{value} 条',//格式化Y轴刻度
style: {
color: '#89A54E'
}
}
,
max:
}, { // Secondary yAxis
title: {
text: '发送数 (条)',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true, //公用一个提示框
formatter: function() {
return this.x +"<br>"
+ "<span style='color:#4572A7'>发送数：" + this.points[].y +" 条</span><br>"
+ "<span style='color:#89A54E'>成功率：" + this.points[].y +" %</span>"
;
}
},
//图例样式设置
legend: {
layout: 'vertical',
align: 'left',
x: ,
verticalAlign: 'top',
y: ,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: '发送数',
color: '#4572A7',
type: 'column',
yAxis: ,
data: [, , , , , , ],
tooltip: {
formatter: function() {
return this.y +"条";
}
} }, {
name: '成功率',
color: '#89A54E',
type: 'spline',
yAxis: ,
data: [, 22.5, , , , , ],
tooltip: {
valueSuffix: ' %'
}
}]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
</div>
</form>
</body>
</html>
HighCharts实现双Y轴的更多相关文章
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- 绘制复数图形和双y轴图形
clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...
- Jqplot使用总结之二(双Y轴)
最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...
- MSChart使用之双Y轴使用
protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- Python科学计算技巧积累四——双y轴图像绘制
双y轴图像具有单y轴图像没有的对比效果,在MATLAB中有plotyy函数可以实现,Python的实现方式没有MATLAB那样方便,不过实现效果却也不见得差. 以往我常用的绘图命令是import ma ...
- 【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制 关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
- matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色
1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...
随机推荐
- 搭建zabbix服务器监控
搭建zabbix 监控服务 服务器环境Centos 7.3 修改网卡名称 高并发优化 Web环境 nginx + php-fpm 必须对nginx配置有连接优化 使用systemd服务启动nginx和 ...
- pysnmp使用
install yum install python-pysnmp yum install python-pyasn1 or pip install pysnmp pip install pyasn1 ...
- raw_input功能
摘要: raw_input() & input() raw_input的功能是方便的从控制台读入数据. input与raw_input都是Python的内建函数,实现与用户的交互,但是功 ...
- 多进程——waitpid()函数的小例子
本例中使用fork()创建一个子进程,然后让子进程暂停5s,接下来对原有的父进程使用waitpid()函数,利用WNOHANG使父进程不会阻塞每隔一秒判断子进程是否退出. #include" ...
- java核心技术 要点笔记3
1.类,超类和子类 2.Object:所有类的超类 3.泛型数组列表 4.对象包装器和自动装箱 5.参数数量可变的方法 6.枚举类 7.反射 8.继承设计的技巧
- java Vamei快速教程07 包
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经写了一些Java程序.之前的每个Java程序都被保存为一个文件,比如Tes ...
- linux 命令——12 more (转）
more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...
- UVALive 4727 Jump（约瑟夫环，递推）
分析: 如果问题是要求最后一个删除的数,重新编号为0到n-1,f[n]表示答案,那么f[n] = (f[n-1]+k)%n. 因为删掉下标k-1以后可以从下标k重新编号为0. 在这个问题只需要推出最后 ...
- 6.3安装squid
1. Frist you need to install Development tools #yum groupinstall "Development Tools" 2. Ge ...
- 在PHP中读取二进制文件
很多时候,数据并不是用文本的方式保存的,这就需要将二进制数据读取出来,还原成我们需要的格式.PHP在二进制处理方面也提供了强大的支持. 任务 下面以读取并分析一个PNG图像的文件头为例,讲解如何使用P ...