Rails 6的Highcharts答案

【问题标题】：Highcharts with Rails 6Rails 6的Highcharts
【发布时间】：2019-12-05 19:06:04
【问题描述】：

我有一个用 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>

【问题讨论】：

标签： javascript ruby-on-rails ruby highcharts

【解决方案1】：

您可以在每次调整图表大小时触发的渲染事件中添加此 img。

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

另外，如何使图像出现在绘图点下方，以便绘图点颜色仍然显示？

对我来说，自定义图像的 zIndex 似乎低于点并出现在下方。

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

【讨论】：