Highcharts使用记录

目录

通用配置

网格线

坐标轴样式

曲线面积图设置颜色渐变

柱状图（条形图）

 设置柱状顶部为圆角

IE兼容

在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.csdn.net/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]-->