hightcharts 之（1）箱型圖

剛結束的項目中，用到了hightcharts 中的箱型圖，看API好艱難（全英文），特此總結了項目中用到的一些屬性并加以注釋。

<script type="text/javascript">
var chart;
$(function () {
    if(${flag} == false){
        $.messager.alert('提示','沒有滿足該條件的有效資料。','info');
    }
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'face',//圖表描繪出後放到頁面的某一具體位置
            type: 'boxplot'//圖表類型：箱形圖
        },
        title: {
            text: '${title2}',
            style:  { 
                "color": "black",
                "fontSize": "24px",
                "fontFamily" : "Arial",
                }
        }, 
        subtitle:{
            text:'${FaceTitle}',
            style:  { 
                "color": "#1a4eb0",
                "fontSize": "18px",
                "fontFamily" : "Arial",
                }
        },
        legend: {//圖例說明是包含圖表中數列标志和名稱的容器
            enabled: false
        },
        exporting:{//圖表導出功能子產品
            enabled:false
        },
        plotOptions: {
            boxplot: {填充顔色
                fillColor: '#4F97D2',//
                lineWidth: ,
                medianColor: '#0C5DA5',//中位線顔色
                medianWidth: ,//中位線寬度
                stemColor: '#000000',//豎線顔色
               // stemDashStyle: 'sloid',//豎線類型（實虛）
                stemWidth: ,//豎線寬度
                whiskerColor: '#000000',//max,min顔色
                whiskerLength: '0',//max,min長度
                whiskerWidth: 
            }        },
        xAxis: {
            lineColor: '#000',
            splitLine:{//背景網格不顯示
                show:false
            },
            labels: {//x文字旋轉角度
                rotation: ${angle}
            },
            tickWidth:,//刻度的寬度 
            categories: function (){
                return JSON.parse('${xList}'); 
            }()
        },
        yAxis: {
            lineColor: 'black',//縱軸
            min:,
            gridLineWidth: ,//背景橫網格線的寬度
            lineWidth:,
            plotLines: [{ //一條豎線(xAxis:通過顔色線橫貫在繪圖區域上标記軸中的一個特定值)
                value: ,  
                width: ,  
                color:'#808080'
            }] ,
            title: {
                text: '所用時間長度（分鐘）'
            },
        },
        credits: false,    //版權資訊
        series: [{
            name: '時長(分鐘)',
             data: function (){
                return JSON.parse('${yList}'); 
            }(),
              tooltip: {//滑鼠移到圖形上時顯示的提示框
                headerFormat: '處理數量： {point.key}<br/>',
              //headerFormat: ''
            }  
        }, {
            name: '',
            color:'#fff',
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                    [, -]
                ]
        }]

    });
});         

</script>
           

以下為效果圖：