highcharts报表开发 一：chart配置

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