highcharts 系统梳理笔记

小说:5公分大叶女贞批发基地在哪里?作者:侯乙更新时间:2019-04-21字数:73539

“不可能的,你怎么可能知道我在哪里?”不知道活了多少年的命运现在知道自己死亡即将到来了,他也感觉到恐惧了,他可没有盘古一族的人那样舍生忘死,为达目的自己多能牺牲,可以说我和僵尸有个约会世界里面最怕死的存在就是命运。

红梅哪个品种耐严寒?

“纪侯爷也是谬奖!”风绝代拱手笑道:“风某也不过是有些奇遇罢了,哪里比得上纪侯爷这般有真本事的人?不仅是风某,便是李大人也对纪侯爷称赞不已,此次前来,还给纪侯爷备下了些许礼物,还望纪侯爷莫要推辞。”说着,风绝代拿出了一个兽皮袋子,双手递给了纪太虚。
按照惯例,一张专辑的预售量会占去季度销量的五分之二到五分之三左右,预售期一般是两周左右。

暗红色光芒涌动,几乎一瞬间就进入了唐三体内,当唐三真正开始吸收邪魔虎鲸王的魂环时,他才理解为什么小白会说邪魔虎鲸王魂环能量霸道。

前言

   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/>"
}
View Code

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: // 图标宽度
}
View Code

 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轴是时间轴,格式化提示框标题中的日期
     }
View Code

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
}
View Code

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);
    });
View Code

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",//副标题垂直对其方式
            },
View Code

 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]
        }]
    });
View Code

通用函数及属性

函数

Axis

官网地址:Axis

Chart

官网地址:Chart

Element

官网地址:Element

 

 

 

 

 

 

 

编辑:顺乙建

发布:2019-04-21 07:59:41

当前文章:http://www.leetaemin.cn/wa26t.html

垂柳的园林用途有什么? 紫藤最佳移植植期是什么时候? 哪里有供应软香红月季花苗? 听说两年生红叶小檗在沭阳挺“火”的哦,实用型非常的强哦 米径16公分乌桕树什么价格能买到? 碗莲种子怎么快速开口? 构树的种子哪里能买到? 适合北方种植的牧草有哪些?

30835 79579 28196 23136 39690 79871 15626 76812 36664 91160 46991 31421 40849 52316 22747 18613 68678 47388 32923 47078

我要说两句: (0人参与)

发布