highCharts使用中問題總結

              想出一張圖表，數據是多條線體，45天的數據展現最近15天的。而且每次展現其中一條。能夠切換時間看前面的 或者後面的。

 

最開始遇到的問題是，展現一條線體成功，可是在切換線體的時候，成功可是接着刷新到最開始的狀態。

跟同事分析後發現是方法引用的問題。也就是每次在給highCharts賦值時要保證都是從新打開一個圖表，可是數據切換了。

            數據的展現。遇到的問題是從ajax查詢後臺時，用request.setAttribute('' , '' ) 無效。jsp頁面得不到數據。  也是能夠理解。而後解決的方案是

在傳值中加上。使用對象JSONObject 傳值。

           

           事件的問題。對每條數據添加點擊事件，使用到this.x 值。這是數據出現的下標值。

        具體代碼以下：

var baseData = '';
    var  arrayIndex = 0 ,j=0;
    var  showLength = 15 ;
    var flags = true ;
    var getObjArray = new Array() ;
    $(document).ready(function() {
        $.ajax({
            type : 'post',
            url : url+'/dmsHistoryHchartsData/highChartsOneCheckData',
            datatype : 'josn',
            async : false,
            data : '',
            success : function(data) {
                baseData = JSON.parse(data);
                var array = baseData['array'] ;
                if(array.length>0){
                    createHighCharts(0);
                }else{
//              若是沒有值 顯示默認圖
 Highcharts.chart('container', {
                        chart: {
                            type: 'column'
 },
                        title: {
                            text: '沒有要展現的數據，請聯繫管理員'
 },
                        xAxis: {
                            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Total fruit consumption'
 },
                            stackLabels: {
                                enabled: true,
                                style: {
                                    fontWeight: 'bold',
                                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
 }
                            }
                        },
                        legend: {
                            align: 'right',
                            x: -30,
                            verticalAlign: 'top',
                            y: 25,
                            floating: true,
                            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                            borderColor: '#CCC',
                            borderWidth: 1,
                            shadow: false
 },
                        tooltip: {
                            headerFormat: '<b>{point.x}</b><br/>',
                            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
 },
                        plotOptions: {
                            column: {
                                stacking: 'normal',
                                dataLabels: {
                                    enabled: true,
                                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
 }
                            }
                        },
                        series: [{
                            name: 'John',
                            data: [5, 3, 4, 7, 2]
                        }, {
                            name: 'Jane',
                            data: [2, 2, 3, 2, 1]
                        }, {
                            name: 'Joe',
                            data: [3, 4, 4, 2, 5]
                        }]
                    });
                }
            },
            error : function() {
                alert("ajax查詢返回失敗");
            }
        });

    });

    function createHighCharts(flagA){
        var array = baseData['array'] ;
        if('1'==flagA){
            if(arrayIndex-1>=0){
                arrayIndex-=1 ;
            }else{
                alert("當前是第一條線體");
                return ;
            }
        }else if('2'==flagA){
            if(arrayIndex+1>array.length){
                alert("當前是最後一條線體");
                return ;
            }else{
                arrayIndex = arrayIndex+1;
            }
        }
        var map = baseData['Map'] ;
        lineName= array[arrayIndex];
        beanList = map[lineName] ;
        var listLength = beanList.length ;
        
        if(showLength>=listLength){
            showLength = listLength;
            flags =false ;
        }else{
            flags=true ;
        }
        j = beanList.length - showLength ;
        changeColumn(0);
    }
    function changeColumn(flagsTwo){
        if('1'==flagsTwo){
            if(!flags){

                alert("當前線體沒有其餘數據展現！");
                return ;
            }else{
                if(j-5>=0){
                    j-=5;
                }else{
                    alert("當前線體沒有其餘數據展現！");
                    return ;
                }
            }
        }else if('2'==flagsTwo){

            if(!flags){
                alert("當前線體沒有其餘數據展現！");
                return ;
            }else{
                if((j +showLength+5)> beanList.length ){
                    alert("當前線體沒有其餘數據展現！");
                    return ;
                }else{
                    j+=5;
                }
            }
        }
         --  構造展現的數據  
        timeArray = new Array();  //  時間數據
 var lineCount = new Array(); // 線體產量
 var goodsCount = new Array(); // 耗材消耗量
 var dollarCount = new Array();  // 耗材消耗金額
 getObjArray = new Array();
        for(var i=0 ;i<showLength;i++ ){
            var bean = beanList[i+j];
            timeArray.push(bean.thisdayA); // 時間
 lineCount.push(parseFloat(bean.milliA));  //線體產量千分比
 goodsCount.push(parseFloat(bean.outWhQtA)); // 耗材消耗量
 dollarCount.push(2);// 模擬數據
 }
        objArray = new Array() ;
        var obj = new Object();  //  展現主數據
 obj.name='費用';
        obj.data = dollarCount ;
        objArray.push(obj);
        obj = new Object();
        obj.name='耗材消耗';
        obj.data = goodsCount ;
        objArray.push(obj);
        obj = new Object();
        obj.name='線體產量';
        obj.data = lineCount ;
        objArray.push(obj);
        basic();
    }

    function basic() {
        var charts = Highcharts.chart('container', {
            chart: {
                type: 'column'
 },
            title: {
                text: '產線' + lineName + '當日產量、耗材消耗量、費用展現'
 },
            xAxis: {
                categories: timeArray
 },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
 },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
 }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
 },
            tooltip: {
                shared: true,
                crosshairs: true,//十字線
 valueSuffix: ''//標示框後綴加上%

 },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
 }
                },
                series: {  --  添加點擊事件
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                alert('耗材明細' +( beanList[parseInt(this.x)+j].msgA));
                            }
                        }
                    }
                }

            },
            series: objArray });    }