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

?