高图表错误 #18:请求的轴不存在



我是HighCharts的新手,我正在尝试在同一x轴上显示2个图形(轴,如下所示:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/。

但是,我收到一条错误消息:当您将系列的 xAxis 或 yAxis 属性设置为指向不存在的轴时,会发生此错误。

错误发生在"chart1"中

html 和 JAVASCRIPT 代码如下:

$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[]
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name

// fill the date array
humid.push(data.humidity);
// fill the string data array 
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
console.log(date);
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
console.log("day_final", day_final);
var chart = new Highcharts.chart({
chart: {
type: 'spline',
renderTo: 'light',
marginBottom: 200
},
title: {
text: 'indicatorName'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: 'Ambient Light Level'
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left 
},
series: [{
name: 'light level',
data: high_final //
}]
});
var chart1= Highcharts.chart('temp&humid',{
chart: {
zoomType:'xy'
},
title:{
text:'Humidity and temperature'
},
xAxis:{
categories: [1,2,3],
crosshair: true
},
yAxis: [{
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title:{
text: 'Temperature',
style:{
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
},
{ //secondary Y AXIS
gridLineWidth: 0,
title:{
text: 'Humidity',
style:{ 
color: Highcharts.getOptions().colors[0]
}
},
labels:{
format: '{value}%',
style:{
color:Highcharts.getOptions().colors[0]
}
}
}] 
,
tooltip:{shared:true},
legend:{
layout: 'vertical',
align:'left',
x:80,
verticalAlign: 'top',
y: 55,
floating:true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series:[{
name:'Humidity',
type: 'column',
yAxis:1,
data:[12,3],
tooltip:{valueSuffix: ' %'}
},
{
name:'Temperature',
type:'spline',
yAxis:2,
data: [1,2,3],
tooltip:{valueSuffix: ' °C'}
}]
});
}); //getJSON method
setTimeout(updat, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>

您正在执行以下操作:

series:[{
yAxis:1,
},
{
yAxis:2,
}]

您需要做:

series:[{
yAxis:0,
},
{
yAxis:1,
}]

问题是轴从0开始索引。因此,将温度设置为轴 2 的索引不起作用,因为没有轴 2。在演示中,有 3 个轴,这就是它使用这些定义的原因。

相关内容

最新更新