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