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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章