Highcharts with Rails 6

问题

I have a scatter chart made with Highcharts. I now need to add an image to the chart. The image should stick to the top right corner. I'm not sure if this is the best way to add an image, but I've managed to get an image on my chart using this code (this is not the acutal image, just a sample):

function (chartt) {
  chartt
    .renderer
    .image('https://www.highcharts.com/samples/graphics/sun.png',0,0,50,50)
    .add();
}

However, if I move the image close to the top right corner, when I resize the chart, the image disappears off of the right side. How can I add this image to the top right corner and have it stick there, even if the chart is resized? Also, how can I make the image appear underneath the plot points so the plot point color still shows? Here is the rest of my code from Highcharts:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/coloraxis.js"></script>
<script>
Highcharts.chart('chart-cont', {
  chart: {
    type: 'scatter',
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
    backgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
      stops: [
        [0, '#2a2a2b'],
        [1, '#3e3e40']
      ]
    },
  },
},
  // add image to chart
  function (chartt) {
    chartt
      .renderer
      .image('https://www.highcharts.com/samples/graphics/sun.png',0,0,50,50)
      .add();
});
</script>

回答1:

You can add this img inside the render events which triggers every time chart was resized.

events: {
  render() {
    var
      chart = this,
      imgWidth = 50;

    //delete old image
    if(chart.customImg){
        chart.customImg.destroy();
    }

    chart.customImg = chart.renderer
      .image('https://www.highcharts.com/samples/graphics/sun.png', chart.chartWidth - imgWidth, 0, imgWidth, imgWidth)
      .add();
  }
},

Demo: https://jsfiddle.net/BlackLabel/ybdt4mn8/

API: https://api.highcharts.com/highcharts/chart.events.render