Highcharts 条形图叠加答案

【问题标题】：Highcharts bar chart overlayHighcharts 条形图叠加
【发布时间】：2021-05-28 20:31:22
【问题描述】：

我想用 Highcharts 实现这种 UI。除了如下所示的错误图标之外，我已经实现了所有功能。

任何人有任何想法我可以如何实现这一点？就像 Highcharts 中是否有任何内置的东西，还是我们必须使用手动 css 来做？

【问题讨论】：

标签： css highcharts frontend react-highcharts

【解决方案1】：

我认为最好的方法是使用 SVG Renderer 并将这些元素渲染到所需的位置： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer https://support.highcharts.com/support/solutions/articles/44001706971-how-to-use-highcharts-svg-renderer-

function(chart) {
  var data = chart.series[0].data;
  var group = chart.renderer.g('icons').attr({
    zIndex: 5
  }).add();

  for (i = 0; i < data.length; i++) {
    chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', data[i].barX + chart.plotLeft - 10, data[i].plotY + chart.plotTop - 15, 30, 30).add(group);
  }
});

演示：https://jsfiddle.net/BlackLabel/2xsjw7qc/

【讨论】：

非常感谢我所需要的。只是提醒任何在 react 和使用 highcharts-react-official 的人。大家可以在Highchart标签的callback参数中传递这个函数。喜欢：<Highcharts callback={function here} />