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