Highcharts使用记录

最新推荐文章于 2022-06-08 14:31:20 发布

Nullo_o

最新推荐文章于 2022-06-08 14:31:20 发布

阅读量4.8k

点赞数

分类专栏： JS/JQuery

本文链接：https://blog.youkuaiyun.com/qq_28332767/article/details/102966966

版权

JS/JQuery 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍Highcharts图表的高级配置技巧，包括通用配置项、网格线、坐标轴样式、曲线面积图的颜色渐变效果、柱状图顶部圆角设置及IE兼容性解决方案。适合希望提升图表视觉效果和兼容性的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在IE8及其以下版本，浏览器会报错：对象不支持“forEach”属性或方法

通用配置

            credits: {//去水印
                enabled: false
            },
            exporting: {//去工具栏
                enabled: false
            },
            legend: {//去图例
                enabled: false
            }

网格线

            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    formatter: function () {
                        return this.value/1000 + 'k';
                    }
                },
                gridLineColor: '#e9e9e9',//横向网格线颜色
                gridLineDashStyle: 'longdash',//横向网格线样式
                gridLineWidth: 1 //纵向网格线宽度
            },

在yAxis上设置横向的网格线，xAxis上设置纵向网格线。

坐标轴样式

            xAxis: {
                tickInterval: 6,//每隔6个显示
                categories: _x,
                //设置样式
                labels: {
                    style: {
                        color: '#595757',
                        fontSize: '12px'
                        //fontFamily:'微软雅黑'
                    }
                    //设置文字的偏移量
                    x: 0,
                    y: 30
                }
            },

曲线面积图设置颜色渐变

            plotOptions: {//数据点选项
                area: {
                    //pointStart: 0,
                    marker: {
                        enabled: false,//是否在数据点上直接显示数据 默认为false
                        symbol: 'circle', //曲线点类型：”circle”, “square”, “diamond”, “triangle”,”triangle-down”，默认是”circle”
                        radius: 0//曲线点半径，默认是4 
                    },
                    color: {/*区域*/
                        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                        stops: [
                            [0, 'rgba(253,213,144,0.8)'],
                            [1,'rgba(252,245,232,0.8)']
                            //[0, '#fdd590'],
                            //[1, '#fcf5e8']
                        ]
                    }, 
                    lineColor: '#f0890e',
                    fillOpacity: 0.2
                    
                }
            },

color：设置颜色渐变

柱状图（条形图）

设置柱状顶部为圆角

在highcharts.js引用下添加rounded-corners.js文件

下载地址：https://download.youkuaiyun.com/download/qq_36291682/9770799

配置：

左上角圆角半径：borderRadiusTopLeft:Number
右上角圆角半径：borderRadiusTopRight:Number
左下角圆角半径：borderRadiusBottomLeft:Number
右下角圆角半径：borderRadiusBottomRight:Number

IE兼容

在IE8及其以下版本，浏览器会报错：对象不支持“forEach”属性或方法

解决办法：

添加两个js文件即可

    <!--[if lt IE 9]>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie-polyfills.js"></script>
    <![endif]-->