我正在使用highchart.js创建条形图和仪表图表。我需要在一定的时间间隔后刷新数据。当我点击URl但是当我使用
刷新它时，我的图表会根据需要出现 setInterval(function(){
//code goes here that will be run every 5 seconds.
getDailyProduction();
getEnergyProduction();
// getOperationCapacity();
}, 5000);
几秒钟后，我收到“TypeError：firstAxis.options.plotBands is undefined”错误。
以下是我为条形图编写的代码：
createBarGraph = function (data, name, title){
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'energyProductionGraph',
type: 'column'
},
title: {
text: 'Energy Production (WEEK)'
},
xAxis: {
title: {
text: 'X Axis Variables'
}
},
yAxis: {
min: 0,
title: {
text: 'Y Axis Variables'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Energy Production',
color: '#81BEF7',
data: data
}]
});
});
});
}
以下是我的仪表图表的代码
createGaugeGraph = function (data, name, title){
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'operatingCapacityGraph',
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Operating Capacity %'
},
pane: {
startAngle: -90,
endAngle: 90,
background: [{
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#666'],
[1, '#0c0c0c']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
backgroundColor: '#DDD',
borderWidth: 1,
outerRadius: '105%',
innerRadius: '104%'
}]
},
plotOptions: {
gauge: {
dial: {
baseWidth: 4,
backgroundColor: '#C33',
borderColor: '#900',
borderWidth: 1,
rearLength: 20,
baseLength: 10,
radius: 80
}
}
},
yAxis: [{
min: 0,
max: 100,
lineColor: '#fff',
tickColor: '#fff',
minorTickColor: '#fff',
minorTickPosition: 'inside',
tickLength: 10,
tickWidth: 4,
minorTickLength: 5,
offset: -2,
lineWidth: 2,
labels: {
distance: -25,
rotation: 0,
style: {
color: '#fff',
size: '120%',
fontWeight: 'bold'
}
},
endOnTick: false,
plotBands: [{
from: 0,
to: 100,
innerRadius: '40%',
outerRadius: '65%',
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#fff'],
[1, '#fff']
]
} // white
},
{
from: 0,
to: 50,
innerRadius: '45%',
outerRadius: '60%',
color: '#000' // black
}]
}],
series: [{
name: 'Value',
data: [50],
dataLabels: {
formatter: function () {
var kmh = this.y;
return '<span style="color:#339">'+ kmh + '%</span>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
},
offset: 10
},
tooltip: {
valueSuffix:' %'
}
}]
}
);
});
});
}
下面是我调用这些图形函数的文件
$(document).ready(function() {
getDailyProduction();
getEnergyProduction();
getOperationCapacity();
// Put all your code here
function getDailyProduction(){
// setting vaiables for Daily prodution graph
var data= [1,2,3,4,5,6,7,8,9,2,3,4,3,2,3,4,5,12,54,34];
var title ='Daily Production (KW)';
var name='Daily Production';
createAreaGraph(data, name, title);
}
function getEnergyProduction(){
// setting variables for Energy production
var last7daysProduced = [1,2,3,4,5,6,7];
var title1 ='Energy Production (KW)';
var name1='Energy Production';
createBarGraph(last7daysProduced, name1, title1);
}
function getOperationCapacity(){
// setting variables for Operating Capacity
var operatingCapacity = 62;
var title2 ='Operating Capacity %';
var name2='Operating Capacity';
createGaugeGraph(operatingCapacity, name2, title2);
}
setInterval(function(){
//code goes here that will be run every 5 seconds.
getDailyProduction();
getEnergyProduction();
getOperationCapacity();
}, 5000);
我还按以下顺序包含了所需的库
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/highcharts.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/highcharts-more.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/js/exporting.js"></script>
请帮我解决问题。如果需要其他任何东西，也请告诉我
答案 0 :(得分：1)
Highcharts的Gauge排行榜仍处于测试阶段。目前还没有官方文档。
以下是HighChart网站上的测试版。
TypeError: firstAxis.options.plotBands is undefined
它是一个报告的错误，
https://github.com/highslide-software/highcharts.com/issues/1155
已经修好了。所以，为此，你必须抓住最新的
来自不稳定分支的 highcharts-more.js。
在Highcharts官方论坛上也有很好的转换： http://highslide.com/forum/viewtopic.php?f=9&t=19618