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: -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>
相关阅读:
创建的第二个随笔
 Jq基础简介
 从VG中去除PV unknown device
redhat using publicyum
Oracle 11g 安装文件说明
 WP8教程：第一个WP8应用(一)
WP8教程：第一个WP8应用(二)
sqlplus 的登录方式
 redhat7 安装oracle11g 缺少pdksh包
 jquery实现一个substr截取字符串的小效果
原文地址：https://www.cnblogs.com/guozhe/p/8508641.html