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