????????????? 想出一張圖表，數據是多條線體，45天的數據展示最近15天的。并且每次展示其中一條?？梢郧袚Q時間看前面的 或者后面的。

?

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

跟同事分析后發現是方法引用的問題。也就是每次在給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
});
}
?

轉載于:https://www.cnblogs.com/a6948076/p/10381574.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的highCharts使用中问题总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。