highcharts 系统梳理笔记

前言

   highcharts最早接触它是在4年前,后来项目中很少用到图表这些东西,就算有也是用echart。他们思路都一样自己去官网上看api即可,构造数据填充节点,没有什么难点,这次是做完手上的工作然后尽对此进行一下梳理与汇总。不会像其他文章那样在乎布局和内容,只是做笔记而已。

通用配置

plotOptions

数据列配置是针对所有数据列及某种数据列有效的通用配置。

数据列的配置有三个级别:

  • 配置在 plotOptions.series,针对所有图表类型有效
  • 配置在 plotOptions.<数据列类型>,针对某种数据列有效
  • 配置在 series,针对某个数据列有效

上述三个级别的配置精准度越来越高,也就是越精准的配置会覆盖前面的配置

下面是实例代码及说明:

plotOptions : {

    // 数据列通用配置
    series : {

        // 允许数据列点击标记, 默认false
        allowPointSelect : false 

        // 初始化动画
        animation : true

        color : 'red' // 数据列的颜色

        数据标签
        dataLabels : {
            align : '' // 数据列的水平对齐方式
            enabled : false //如何设置为true,数据列自动显示列的信息,默认false
            backgroundColor : 'red' // 数据标签背景颜色
            borderColor : 'red' // 数据标签边框颜色
            borderWidth : 1 //数据标签边框宽度
            borderRadius : 5 // 数据标签边框圆角
            color : 'red' // 数据标签字体颜色
            format : '{y}unit' // 数据标签显示内容格式化
            formatter : function () {
                // 数据标签内容格式化函数
            }
            padding : 5 // 数据标签的内边距
             x: 0, // 坐标显示位置
             y: -20 // y轴显示
        }
        showCheckBox : false // true显示checkbox框,默认false
        events : {
            // 隐藏数据列触发
            hide : function () {}

            // 显示数据列触发
            show : function () {}

            // 动画加载完毕触发
            afterAnimate : function () {}

            // checkbox选中事件
            checkboxClick : function (){}

            // 数据列点击事件
            click : function () {}

            // 禁止图列点击事件
            legendItemClick : function () {return false}

             // 鼠标划出数据列事件触发
             mouseOut : function () {}

            // 鼠标划入数据列事件触发
            mouseOver : function () {}
        },
        keys : ['name', 'y', 'sliced', 'selected'] // 该参数指定了数据数组中每个元素对应的 key, 当另一个(data)当数组中第三个元素都为true时默认选中,突出显示['chrom', 192,true,true],

        lineWidth : 1, // 数据列的线条宽度

        linkedTo : ':previous' // 数据列关联,关联前一个数据列

        // 数据点配置
        marker : {

            enabled : null// 默认null, 是否显示数据点标记
            lineColor : '' // 数据点线条颜色
            fillColor : '' // 数据点中心圆点颜色
            height : number // 数据点高度
            states : {
                hover : {} // 鼠标经过数据点样式配置
            }
            radius : number // 指定数据点的大小
            symbol : 'circle' // 默认圆点, 一般取默认值
        }

        negativeColor : '#ccc' // 指定数据列负值颜色,比如-1

        // 数据点相关配置
        point : {
            events : {

                // 点击数据点触发
                click : function () {}

                // 鼠标离开数据点触发事件
                mouseOut : function () {

                } 

                 //  鼠标划入数据点触发事件
                mouseOver : function () {

                }

                // 更新数据点触发
                update : function () {

                }

                // 点击选中数据点时触发,必须allowPointSelect为true才有效
                select : function () {

                }

                // 取消选中数据点触发
                unselect : function () {

                }


            }
            // 数据点间隔, 开始值
            pointStart: Date.UTC(2010, 0, 1), 

            // 间隔一天
            pointInterval: 24 * 3600 * 1000 

            // 间隔单位
            pointIntervalUnit: 'month'

            // 指定数据列初始的选中状态,如果设置了 showCheckbox 为 true 时,默认是:false.
            selected: false

            // 数据列阴影效果
            shadow: true 

            // 是否显示CheckBox框, 默认false, 为true 时显示
            showCheckbox : false

            // 是否进行堆叠(堆叠顾名思义就是多跟数据列堆成一根), 默认不堆叠,是否开启堆叠,"normal"(普通堆叠) 和 "percent"(百分比堆叠
            stacking : null

            // 鼠标划过状态下的数据列配置
            states : {
                hover : {
                    //..............配置项
                }
            }


             tooltip: {
                    xDateFormat: '%Y-%m-%d', 
                    dateTimeLabelFormats.day
                    dateTimeLabelFormats: {
                            day: '%m-%d',
                            month: '%Y-%m'
                    },
                    shared: true

                    valueDecimals: 小数精确位数
                    valuePrefix: 值的前缀
                    valueSuffix: 值的后缀
            },

            // 数据列显示状态, 默认true, false为隐藏
            visible : true

            // 指定数据列的分区数组,可以理解为一条数据列可以配置多个颜色显示
            zone : []

        }           

    }
}

// 数值格式化百分比
tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
}

legend

图例说明是包含图表中数列标志和名称的容器。各数列(若饼图则为各点)由图例中的标志和名称表示。

legend : {

    backgroundColor : '#ccc' // 背景颜色

    borderWidth : '0', // 边框宽度

    borderRadius : 0,  // 边框圆角

    borderColor : 'red', // 边框颜色

    enabled : true,  // 图例开关

    layout : 'horizontal' // 图例布局类型,默认horizontal 水平布局,垂直布局vertical

    // 图例点击后颜色
    itemHiddenStyle : {
           color : 'red'
     }
     // 鼠标放上样式
     itemHoverStyle : {
        color : 'red'
    }
    symbolPadding : 5 // 图标跟文字的间距
    symbolPadding: // 图标后距
    symbolRadius: // 图标圆角
    symbolWidth: // 图标宽度
}

 tooltip

数据提示框指的当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值,数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定;通过设置 tooltip.enabled = false 即可不启用提示框

plotOptions: {
  spline: {           // 针对 spline 有效的配置
    lineWidth: 1 
  },
  series: {           // 针对所有数据列有效的配置
    lineWidth: 2
  }
}
series: [{
  id: 'series 1',
  type: 'spline',       // type 默认值是 'line'
  data: [1, 4, 56, 69],
  lineWidth: 2          // 该参数会覆盖 plotOptions.spline.lineWidth 里的配置
}, {
  data: [4, 5, 6],
  lineWidth: 3          // 该参数会覆盖 plotOptions.series.lineWidth 里的配置
}, {
  data: [10, 500, 199]  // 该数据列会继承 plotOptions.series.lineWidth 里的配置
}]
tooltip : {

            shared: true,  // 提示框是否共享

            backgroundColor : 'red', // 提示框背景色

            enabled : true, // 是否启用提示框, 默认启用

            formatter : function (){ // 提示框格式化字符串
                 var s = '<b>'+this.x+'</b>';
                 $.each(this.points ,function(){
                     s += '<br />' + this.series.name + ':' + this.y;
                 });
                 return s;
             },

             pointFormatter : function () { // 格式化提示框字符串,更灵活,优先使用
                // 函数中的 this 代表着 Point 对象。
             }
             positioner: function () { // 固定提示框
                 return { x: 80, y: 50 };
             },
             valueSuffix: ' cm', // 数值后缀

             valuePrefix : '数据前缀' // 数值前缀

             valueDecimals : 2, // 保留小数位数

             xDateFormat :  '%Y-%m-%d', // shared: true,

             backgroundColor : 'red',

             enabled : true,

             formatter : function (){
                 var s = '<b>'+this.x+'</b>';
                 $.each(this.points ,function(){
                     s += '<br />' + this.series.name + ':' + this.y;
                 });
                 return s;
             },
             pointFormatter : function () {
                // 函数中的 this 代表着 Point 对象。
             }
             positioner: function () {
                 return { x: 80, y: 50 };
             },

            valueSuffix: ' cm',

             valuePrefix : '数据前缀'

             valueDecimals : 2,

             xDateFormat :  '%Y-%m-%d', //  如果 X轴是时间轴,格式化提示框标题中的日期
     }

xAxis/yAxis

X 轴/Y周

xAxis {

        // x坐标轴中的分类
        categories :[1,2,3,.....]   // Array<String> 

        // 配置跟随鼠标或鼠标滑过点时的十字准星线
        crosshair: {
                     dashStyle : 'shortdot',
                     color : '#cccccc',
                     zIndex : 1,
        },

        // 时间轴标签的格式化字符串
        type : 'datetime',
        dateTimeLabelFormats: {
             day: '%Y-%m-%d',
             month : '%Y-%m'
        },

        // 坐标轴标签
        labels: {
             align : 'center' // 坐标轴标签位置
             enabled: true // 是否显示坐标轴标签, 默认显示

             // 坐标轴内容格式化函数
             formatter: function () {
                 return '<a href="' + categoryLinks[this.value] + '">' +
                     this.value + '</a>';
             }

            // x轴旋转
            rotation: 0 

            // 设置轴标签的样式
            style : {
                color : xxx.
                fontSize : 18
            }

            // 是否显示坐标轴,默认显示,false不显示
            visible : true
}

chart

关于图表区和图形区的参数及一般图表通用参数

$("#container").highcharts({

        chart : {

                // 图表背景颜色配置
                backgroundColor: '#FCFFC5',

                // 图表背景渐变颜色
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(200, 200, 255)']
                    ]
                },

                // chart边框圆角
                borderRadius : numer, // 值类型 1,5,10....

                borderWidth : number, // 值类型 1,5,10....

                colorCount : 10, // number 默认10 一般取默认值即可

                type : 'line', //string 图表类型 默认取 line

                height : number, // 图表高度 数字

                ignoreHiddenSeries :bool,  // false/true 隐藏数据列,缩放显示

                inverted : false, // 反转坐标值 x轴跟y轴调换

                margin : [null], // 默认null,表示图表区域和绘图区域的边距

                // 设定鼠标平移按键
                panning: true,
                panKey : 'shift',

                // 绘图区域样式调整
                plotBackgroundColor : 'red', // #xxxxxx 绘图区域背景颜色
                plotBackgroundColor: {// #xxxxxx 绘图区域背景渐变颜色
                        linearGradient: [0, 0, 500, 500],
                        stops: [
                            [0, 'rgb(255, 255, 255)'],
                            [1, 'rgb(200, 200, 255)']
                        ]
                    }
                plotBackgroundImage : 'xxx.jpg' // url地址 绘图区域背景图片
                plotBorderColor : 'red' // 绘图区域边框颜色
                plotBorderWidth : number //1,5,10 绘图区域边框宽度

                reflow : true // 默认true 让图表自适应图表容器

                zoomType : 'x' //x/y 图表选中缩放方式

                // 图表缩放按钮的位置 reset zoom
                resetZoomButton : {
                    position : {
                        align : 'right', // 默认 right
                        verticalAlign : 'top' // 默认top
                    },
                    relativeTo : 'plot' // 按钮的位置相对于绘图区还是整个图表,默认plot/chart
                },

                // 图表3d形状
                options3d : {
                    enabled : true, // 开启3d效果
                    alpha : 30,  // 默认0 内旋转
                    beta : 10,   // 默认0 外旋转
                    depth : 100, // 默认100 深度 
                    fitToPlot : true // 自适应图绘区 false不自适应
                    frame: {} // 背景颜色大小控制
                }


                // chart 事件触发
                events : {

                        // 添加数据列触发
                        addSeries : function(e) {

                        },

                        // 打印chart前触发
                        beforePrint : function() {

                        },
                        // 打印chart之后触发
                        afterPrint : function() {

                        },
                        // 点击数据列触发, 异步加载数据 下钻
                        drilldown : function(e) {

                        },

                        // chart加载完毕触发
                        load : function () {

                        },
                        // (在 load 事件之后执行)后及每次图表重绘后后触发
                        render : function () {

                        },

                        // 鼠标选中图表事件 必须先设置zoomType的值(x, y)
                        selection : function(e) {

                        }
                }

            }
});
    // 动态修改坐标值
    $('#update').click(function () {
            var chart = $('#container').highcharts();
            chart.series[0].data[0].update(i % 2 ? 200 : 0);
    });

title

图表标题

 title: {
                text: '我是标题',//标题
                align: 'low',//对其方式
                margin: 60,// 坐标轴标题与坐标轴轴线或坐标轴标签的像素距离。对于水平轴,默认值是 0,竖直轴默认是 10。
                style: {//样式
                    color: 'red'
                },
                widthAdjust: -200,//字体显示屏高度
                x: 10,//x轴偏移
                y: 20 //y轴偏移
            },
            subtitle: {
                text: '我是副标题',
                style: {//样式
                    color: '#FF00FF',
                    fontWeight: 'bold'
                },
                floating: true,//是否浮动
                useHTML: true,//是否html 渲染
                verticalAlign: 'bottom',//副标题垂直对其方式
            },

 series

数据列,这个也是后天主要构建的数据,针对于不同的图形设置不同的series,其中data是其核心。

series : [{
    name : '',
    data : []
}] 

color 

 Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });
    Highcharts.chart('container', {
        chart: {
            type: 'pie'
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

通用函数及属性

函数

Axis

官网地址:Axis

Chart

官网地址:Chart

Element

官网地址:Element

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:小结一下Box Model与Positioning Scheme

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新...

1646
来自专栏進无尽的文章

绘图-Core Graphics

CGContext又叫图形上下文,相当于一块画布,以堆栈形式存放,只有在当前context上绘图才有效。iOS有分多种图形上下文,其中UIView自带提供的在d...

513
来自专栏前端说吧

css笔记 - transition学习笔记(二)

transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

533
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

451
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

752
来自专栏blackheart的专栏

1.[Andriod]之Andriod布局 VS WinPhone布局

0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个...

1998
来自专栏Coco的专栏

【CSS进阶】伪元素的妙用--单标签之美

24212
来自专栏前端儿

Flex 布局相关用法

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中 就不容易...

831
来自专栏42度空间

【图片版】CSS网格布局(Grid)完全教程

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内...

38410
来自专栏程序员的诗和远方

Canvas基础-粒子动画Part3

在上一篇文章 Canvas基础-粒子动画Part2 中讲了让图片做粒子动画。上篇写完不久,想起既然是用Canvas,写上去的东西都可以做粒子动画,那么就补充讲...

3799

扫描关注云+社区