highcharts柱状图和折线图在同一图表中显示（非混合图）

一个程序员_zhangzhen

已于 2023-05-24 15:27:13 修改

阅读量692

点赞数

分类专栏：图表文章标签： .net c#

于 2020-03-11 13:42:30 首次发布

本文链接：https://blog.csdn.net/qq_22325259/article/details/104793185

版权

图表专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说，先上效果图：
highcharts图表

今天接到一个需求，项目中加个在线率统计，
柱状图表示各区的在线率，同时显示一个折线，表示全市的平均值，
用于各区与全市平均的对比，是高于平均还是低于平均。
去官网搜了下，混合图表，也能满足我的需求，但有些差别，
混合图双坐标代表的是两种不同的数据，
而我这个图表示同一种数据，
同一种数据用不同的图形展示出来。

现贴出代码，此代码为.net aspx页面代码，请根据自己项目语言进行调整，js引用需要修改成自己本地文件位置。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Js/jquery-1.8.3.min.js"></script>
    <script src="../Js/Highcharts-4.2.5/highcharts.js"></script>
    <script src="../Js/Highcharts-4.2.5/highcharts-more.js"></script>
    <script src="../Js/Highcharts-4.2.5/modules/data.js"></script>
    <script src="../Js/Highcharts-4.2.5/modules/exportingNew.js"></script>
    <%--<script src="../Js/Highcharts-4.2.5/highcharts-zh_CN.js"></script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="container" style="border: 1px solid #BEDCF7; margin: auto; margin-top: 10px; width:700px;"></div>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            var title = '各区数据在线率(%)';
            var w = 300;
            var h = 500;
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: title
                },
                xAxis: {
                    type: 'category',
                    categories: ["A区","B区","C区"],
                },
                yAxis: {
                    min: 0,
                    max: 100,
                    title: {
                        text: '在线率(%)'
                    }
                },
                tooltip: {
                    followPointer: true,
                    //pointFormatter: function () {
                    //    return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>：<b>' + this.y + '</b><br/>';
                    //},
                    formatter: function () {//注：这里只适用本页面，一般不会这样显示
                        var val = '';
                        if (this.points.length > 0) {
                            val = '<div>在线率</div>';
                            for (var i = 0; i < this.points.length; i++) {
                                if (this.points[i].series.name != '全市平均')
                                    val += '<span style="color:' + this.points[i].color + '">' + this.x + '</span>: <b>' + this.points[i].y + '</b><br/>';
                                else
                                    val += '<span style="color:' + this.points[i].color + '">' + this.points[i].series.name + '</span>: <b>' + this.points[i].y + '</b><br/>';
                            }
                        }
                        return val;
                    },
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            symbol: 'circle',
                            radius: 2,
                            enabled: false
                        }
                    },
                    column: {
                        //stacking: 'percent',//可用的参数值包括 null（不进行堆叠）、"normal"（普通堆叠） 和 "percent"（百分比堆叠）。
                        groupPadding: 0.08,//不同组柱子之间的间隙
                        maxPointWidth: 40//柱状最大宽度
                    }
                },
                credits: {
                    enabled: false
                },
                series: [{
                    'type': 'column',
                    'name': '在线率',
                    'data': [100, 80, 90]
                }, {
                    'type': 'spline',
                    'dashStyle': 'Dash',
                    'name': '全市平均',
                    'data': [90, 90, 90],  //在线率之和除以总数量  (100+80+90)/3=90
                    'color': 'red'
                }],
                exporting: {
                    sourceWidth: w,
                    sourceHeight: h,
                    scale: 1,
                    buttons: {
                        contextButton: {
                            symbol: 'url(../Js/Highcharts-4.2.5/symbol.png)'
                        }
                    },
                    filename: title
                }
            });
        });
    </script>
</body>
</html>

程序猿
微信扫码关注公众号，一起学习进步，里面有满满的干货，等你来拿。

一个程序员_zhangzhen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
highcharts柱状图和折线图在同一图表中显示（非混合图）

话不多说，先上效果图：今天接到一个需求，项目中加个在线率统计，柱状图表示各区的在线率，同时显示一个折线，表示全市的平均值，用于各区与全市平均的对比，是高于平均还是低于平均。去官网搜了下，混合图表，也能满足我的需求，但有些差别，混合图双坐标代表的是两种不同的数据，而我这个图表示同一种数据，同一种数据用不同的图形展示出来。现贴出代码，此代码为.net aspx页面代码，请根据自己项...
复制链接

扫一扫