HighCharts实现双Y轴
2024-10-19 12:00:24
<%@ 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>
最新文章
- hello,world!
- Linux创建用户(转)
- Android 异步加载神器Loader全解析
- java对称加密（AES）
- Python 异常处理--raise函数用法
- ext3学习小结
- Apache崩掉：为进程配置合适的线程数
- 201521123031 《Java程序设计》第4周学习总结
- android binder理解
- Android 6.0以上动态获取权限
- Python魔法函数
- One-hot encoding 独热编码
- Maven 传递依赖冲突解决（了解）
- 【CF480D】Parcels DP
- sqlserver group by后获取其他字段（多种方法）
- [PHP] 算法-合并两个有序链表为一个有序链表的PHP实现
- Android将Log写入文件
- Python读写文件基础.py
- 服务器重启报错：提示fstab readonly报错！（ /etc/fstab 只读无法修改的解决办法）
- Android ：64位支持的说明