highcharts报表开发

highcharts报表开发 一：chart配置

转自：http://blog.csdn.net/xueling022/article/details/72476447

highcharts 核心配置 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);
    });

highcharts报表 二：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: // 图标宽度
}

highcharts报表 三：plotOptions 针对所有图表有效的通用配置

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

---

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/>'
}

highcharts报表 四：tooltip数据提示框指配置

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

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

highcharts报表 四：xAxis X 轴（或分类轴）通用配置

**X 轴（或分类轴）。默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。
在多轴中，xAxis 可以配置成数组的形式。
X 轴可以通过 坐标轴对象 来进行动态更新或进行其他操作。**

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
}