<%@ 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: -45, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
}],
yAxis: [{ // Primary yAxis
title: {
text: '成功率 (%)',
style: {
color: '#89A54E'
}
},
labels: {
format: '{value} 条',//格式化Y轴刻度
style: {
color: '#89A54E'
}
}
,
max: 100
}, { // 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[0].y +" 条</span><br>"
+ "<span style='color:#89A54E'>成功率：" + this.points[1].y +" %</span>"
;
}
},
//图例样式设置
legend: {
layout: 'vertical',
align: 'left',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: '发送数',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [50, 70, 100, 120, 145, 176, 135],
tooltip: {
formatter: function() {
return this.y +"条";
}
}
}, {
name: '成功率',
color: '#89A54E',
type: 'spline',
yAxis: 0,
data: [80, 22.5, 45, 90, 99, 35, 45 ],
tooltip: {
valueSuffix: ' %'
}
}]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
</div>
</form>
</body>
</html>
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
