<%@ 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>
