Highcharts中初始化最大值與最小值的柱狀圖

標籤：style   blog   http   io   ar   color   os   sp   for   

var resultObj = "{name:‘當月總量數‘,data:[null,null,null,null,null]}@{name:‘累計總量數‘,data:[19263.9,27077.7,5663.6,13207.5,20361.7]}";        var resultText = resultObj.toString();        var resultStr = resultText.split("@");        var min = null,max = null,mark = true,data = null;        for(var i=0;i<resultStr.length;i++){            var jSVO =  eval("("+resultStr[i] +")");            resultStr[i] = jSVO;            data = resultStr[i].data;            for(var j = 0, len = data.length;j < len;j ++){                if(data[j] == null){                    continue;                }                                if(mark){                    mark = false;                    min = data[j],max = data[j];                }                if(min > data[j]){                    min = data[j];                }                if(max < data[j]){                    max = data[j];                }            }        }        console.log(min + "======" + max);        //X軸        var xAxisObj = "2013年09月@12月@2014年03月@06月@09月"        var xAxisText = xAxisObj.toString();        var xAxisStr = xAxisText.split("@");        $(function () {                        //畫圖            $(‘#container‘).highcharts({                chart: {                    type: ‘column‘                },                title: {                    text: ""                },                colors:[‘#8300b6‘,‘#73abe4‘],                    subtitle: {                    text: ""                },                xAxis: {                    tickmarkPlacement:‘on‘,                    labels:{                        rotation:-15,                        style:{                            fontSize:‘18px‘                        }                    },                    categories: xAxisStr                },                yAxis: {                    min: min,                    max: max,                    title: {                        text: ""                    },                    labels : {                         enabled: true                    }                },                credits:{//右下角的文本                      enabled: false                },                exporting:{                     enabled:false //用來設定是否顯示‘列印’,‘匯出‘等功能按鈕，不設定時預設為顯示                    },                tooltip: {                    enabled: true,                    headerFormat: ‘<span style="font-size:16px">{point.key}</span><table>‘,                    pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ +                        ‘<td style="padding:0"><b>{point.y}</b></td></tr>‘,                    footerFormat: ‘</table>‘,                    shared: true,                    useHTML: true,                    style:{                        fontSize:‘16px‘                    }                },                plotOptions: {                    column: {                          dataLabels: {                             enabled: true                         },                         pointWidth: 10,                        pointPadding : 0.1                                           }                     },                plotOptions: {                    column: {                           dataLabels: {                               enabled: true,                                                              formatter: function() {                                   return this.y;                               }                           }                    }                },                 series: resultStr            });    });    

<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script> //上面的Javascript代碼 </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> </body> </html>

 

Highcharts中初始化最大值與最小值的柱狀圖