HighCharts实现双Y轴

最新推荐文章于 2023-08-29 09:49:13 发布

吉普赛的歌

最新推荐文章于 2023-08-29 09:49:13 发布

阅读量1.5w

点赞数 4

分类专栏：前端 - JS

本文链接：https://blog.csdn.net/yenange/article/details/42592875

版权

前端 - JS 专栏收录该内容

84 篇文章 0 订阅

订阅专栏

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