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
 });
    }