>我有一个通过chart.renderer
添加矩形的图表,它看起来完全符合我在 Firefox 中想要的样子,但是当我在 Chrome 或 IE 中查看它时,坐标是关闭的。我有min
和max
设置,我已经尝试了setInterval
,但无济于事。这是我的代码:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart) { // on complete
chart.renderer.rect(348, 50, 242, 217, 0)
.attr({
fill: 'red'
})
.add();
});
这是它在Firefox中的样子:https://i.stack.imgur.com/TB98C.png
这是它在Chrome中的样子:https://i.stack.imgur.com/X0QPz.png
我相信
我已经找到了解决方案。它与图表偏移量 chart.plotLeft 和 chart.plotTop 有关。我稍后会发布我的完整解决方案。
这是我的工作代码:
$('#ao_vs_ppv').highcharts({
chart: {
renderTo: 'ao_vs_ppv',
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .01,
max: 10,
type: 'logarithmic',
minorTickInterval:0.1,
title: {
text: "Peak Particle Velocity (in/sec)"
},
labels: {
overflow: 'justify'
},
gridLineWidth: 1,
plotBands: [{
color: '#F7FE2E',
from: .4,
to: 10
},{
color: '#F7FE2E',
from: 1,
to: 10
}]
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
},
plotBands: [{
color: '#F7FE2E',
from: 120,
to: 150
}]
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
}, function(chart)
{ // on complete
//calculate corrdinates and dimensions based on offsets
var x=279+chart.plotLeft;
var y=chart.plotTop;
var width=chart.plotWidth*.467;
var height=chart.plotHeight*.502;
chart.renderer.rect(x, y, width, height, 0)
.attr({
fill: 'red'
})
.add();
});