Highcharts 条形图叠加

Question

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

有人知道我该如何实现吗？比如 Highcharts 中是否有任何内置的东西，或者我们必须使用手动 css?

Answer 1

我认为最好的方法是使用 SVG 渲染器并在所需位置渲染这些元素： 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/

Highcharts 条形图叠加

Highcharts bar chart overlay

css

highcharts

frontend

react-highcharts