javascript - 使用 Rails 6 制作 Highcharts

Question

我有一个用 Highcharts 制作的散点图。我现在需要向图表添加图像。图像应粘在右上角。我不确定这是否是添加图像的最佳方式，但我已经设法使用此代码在图表上获取图像(这不是实际图像，只是一个示例):

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

但是，如果我将图像移动到靠近右上角的位置，则当我调整图表大小时，图像会从右侧消失。如何将此图像添加到右上角并将其粘贴在那里，即使图表大小已调整？另外，如何使图像出现在绘图点下方，以便绘图点颜色仍然显示？这是我来自 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>

Answer 1

您可以在渲染事件中添加此图片，每次调整图表大小时都会触发该事件。

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();
  }
},

演示:https://jsfiddle.net/BlackLabel/ybdt4mn8/

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

Also, how can I make the image appear underneath the plot points so the plot point color still shows?

对我来说，看起来自定义图像的 zIndex 低于点并且出现在下面。

如果您有任何其他问题 - 请随时提问。