HighCharts实现双Y轴

来源：互联网发布：java ftp上传附件编辑：程序博客网时间：2024/04/29 12:09
<%@ 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>
1 0