javascript - Highcharts 渲染器 x 和 y 在 Firefox 与 Chrome 上不同

Question

我有一个图表，其中通过 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 中的样子:/image/TB98C.png

这是 Chrome 中的样子:/image/X0QPz.png

Answer 1

我相信我已经找到了解决方案。它与图表偏移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();  
                    });