highcharts 常用配置

　　highcharts官方api文檔寫得不是很詳細，如果使用的時候看哪個api文檔，感覺理解起來還是蠻難的 ，尤其對於新手來說，等於沒啥用， 不過官方的demo還是很有用的， 如果覺得難，就把demo多看一些，一邊看一邊修改一些屬性，這樣能更方便理解；

　　下面根據例子一行一行注釋，這樣理解起來應該更容易；

new Highcharts.Chart({
                chart: {
                    renderTo:'container',  //這是頁面id，是將這個圖標插入到這個id容器中
                    zoomType: 'xy'　　　　　//圖形放大（操作方法是鼠標點擊圖中拖動鼠標，選中的區域會被放大），寫x就放大x軸數據，y就放大y軸數據，xy就是全部放大；
                },
                exporting:{
                    enabled:false　　　　　//導出按鈕是否顯示
                },
                title: {
                    text: '標題',　　　　　//標題名稱
　　　　　　　　　　　　style: {　　　　　　　//標題樣式，這個里面可以設置標題顏色，字體大小，位置等
　　　　　　　　　　　　　　 fontSize: '12px'
　　　　　　　　　　　　}
                },
                legend:{
                    itemStyle:{
                        fontWeight:'normal'//這個就是不要加粗
                    },
                    margin:5
                },
                xAxis: {　　　　　　　　　　　　　　　　//x軸數據，可以自定義，也可以為時間
                   //categories: [1,2,3,4,5,6],    //這里這行是寫死的，也可以自己定義一個數組；
　　　　　　　　　　　　type: 'datetime', 　　　　　　　　//定義x軸為時間，需要注意的是時間一定要是升序，如果不是會報#15的錯誤
　　　　　　　　　　　　//reversed: true, 倒序顯示
　　　　　　　　　　　　labels: { 
　　　　　　　　　　　　　　formatter: function() { 
　　　　　　　　　　　　　　　　return Highcharts.dateFormat('%Y-%m', this.value);   //將時間戳轉換成年-月
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}                },

                yAxis: [{　　　　　　　　　　　　　　　//定義y軸
                    labels:{
                        valueDecimals: 2,　　　　　　//當你的數據很大，比如10000000時，這里會自動顯示成10M,10000顯示為10K
                        style: {
                            color: '#6B6B6B'
                        }
                    },
                    //tickInterval:2,　　　　
                    tickPixelInterval:40,　　　　　　//y軸的行高
                    min:0,　　　　　　　　　　　　　　　//設置最小值
　　　　　　　　　　　 max:10　　　　　　　　　　　　　　　//設置最大值

                    title: { 　　　　　　　　　　　　　　//y軸防線標題及樣式
                        text: '',
                        style:{
                            color: '#6B6B6B',
                            width:'10em'
                        },
                        //align:'high',
                        offset:50,
                           //rotation:0
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#6B6B6B'
                    }]
                },{ //
                    //tickInterval:m_max,　　　　　　//如果有兩條線，而且兩條線的單位不一樣，這樣就需要設置兩個y軸，來顯示不同的數據
                    tickPixelInterval:30,
                    //min:2,
                    title: {
                        text: ''
                    },
                    labels: {
                        //format: '{value} 元',
                        valueDecimals: 2,
                        style: {
                            color: '#6B6B6B'
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#6B6B6B'
                    }],
                    opposite: true
                }],
                tooltip: {　　　　　　//設置彈出提示框，這里是重點，也是難點，因為彈出提示框里面的內容可能有自定義的；
                    snap: 0,       //設置顯示數據標簽的敏感區域值 單位為px，為0表示距離數據點為0px的時候顯示標簽，默認情況下為10px，移動設備最好設置為25px
                    hideDelay:0,   //設置隱藏標簽延遲時間值，單位為毫秒，默認為500毫秒；當設置為0時，只要鼠標離開數據點就隱藏標簽
                    shared: true,　　//如果一個圖表中有多個圖形，提示數據在一個框中彈出
　　　　　　　　　　　　useHTML: true,  //使用html代碼
　　　　　　　　　　　　formatter: function() { //格式化鼠標滑向圖表數據點時顯示的提示框  
                        return '<span style="color:'+this.series.color+'">'+this.x+'</span></br>'+   //這里返回的內容就是提示框彈出的內容，
                                  this.series.name+': <b>'+this.y+'</b>'    
                    }  
                },
    /* 　　　　　　 legend: {    //圖例的顯示位置
                    layout: 'vertical',
                    align: 'left',
                    x: 80,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: '#FFFFFF'
                },  */
                credits: {
                    enabled: false　　　　　　//去除highcharts的鏈接
                },
                series: [{
                    name: 'name1',
                    color: '#95CEFF',
                    type: 'column',
                    data: yAxis_c,
                },{
                    name: 'name2',
                    color: '#FCF12E',
                    //type: 'spline',
                    data: yAxis_s,
                    marker: {
                        enabled: false, //數據點是否顯示*/
                        radius: 2,  //數據點大小
                    },
        
                }]
            });

如果出現錯誤， 只需根據錯誤號去查找就行；

　　還有需要注意的是繪圖的數據不能是字符串，只能是數字；如果是字串圖就不顯示了；

　　還有一種顯示彈出框信息的方式

pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}%</b>',

這里的pointFormat里面的內容就是彈出框顯示的內容，{series.color}表示series中的color，{point.y:.2f}表示y軸的值，並保留兩位小數；

限制某些圖例名稱是否顯示

showInLegend: true // 默認值

showInLegend: false // 設置為 false 即為不顯示在圖例中

設置數據點大小

marker: {
enabled: true, //數據點是否顯示
radius: 4, //數據點大小
states: {
hover: {
radius: 5, //數據點大小
}
}
},

設置Y軸刻度間距，值越大，刻度間距越大；

tickPixelInterval:100;

控制標題文字樣式

title: {
text: '變動數量',
rotation : 360, //文字旋轉角度
style: {
writingMode:'tb-rl' //文字豎排樣式
}