Javascript HighCharts-带指示器的条形图

我了解了如何在HighCharts中制作堆叠条形图和柱形图。但是，我希望能够在条/列的外部放置一个箭头，以指示其中的一个点，类似于：

---

这在海图中可能吗？我找不到这样的例子。

当然有可能

有两种方法可以实现这一点

使用scretterPlot

在这种方法中，您将构建一个addl散点图系列。散点图系列的值将帮助您将其定位在此处

渲染图像

使用

chart.rendere.image（src，x，y，length，height）

可以渲染图表上的任何图像

找到坐标没什么大不了的

---

希望这就是您想要的

当然有可能

有两种方法可以实现这一点

使用scretterPlot

在这种方法中，您将构建一个addl散点图系列。散点图系列的值将帮助您将其定位在此处

渲染图像

使用

chart.rendere.image（src，x，y，length，height）

可以渲染图表上的任何图像

找到坐标没什么大不了的

---

希望这就是您想要的

如果您真的需要符号，我会使用上面回答的分散序列方法

您还可以绘制一条绘图线：

---

当然，这不包括箭头，但您可以用这种方式绘制线和标签，在我看来，此时确实不需要箭头。FWIW

如果你真的需要一个符号，我会使用上面回答的分散序列方法

您还可以绘制一条绘图线：

当然，这不包括箭头，但您可以用这种方式绘制线和标签，在我看来，此时确实不需要箭头。FWIW

您的示例：

添加三角形和函数以更改散布位置（如果要将线添加到标记，只需更改返回路径）：

给你举个例子：

添加三角形和函数以更改散布位置（如果要将线添加到标记，只需更改返回路径）：

{
                name: 'indicator',
                data: [5],
                type: 'scatter',
                marker:{
                    //here you can have your url
                    symbol: 'circle',
                }
            }

var chart;
$.extend(Highcharts.Renderer.prototype.symbols, {
    'triangle-left': function (a, b, c, d) {
        return ["M", a, b + d, "L", a, b, a + c / 2, b + d / 2, "Z"];
    }
});
Highcharts.updateMarketMarkers = function (chart,action) {
  /* get category width */
  var barWidth = chart.series[0].data[0].pointWidth / 2;
  for(var i = 0; i < chart.series[2].data.length; i++){
    var p =  chart.series[2].data[i];
    if(p.graphic){
       p.graphic[action]({
         x: p.plotX - barWidth - p.graphic.r
       });
    }
  }
};

    chart: {
        renderTo: 'container',
        type: 'column',
        showAxes: false,
        events: {
            load: function () {
                Highcharts.updateMarketMarkers(this, 'attr');
            },
            redraw: function () {
                Highcharts.updateMarketMarkers(this,'attr');
            }
        }
    },
    plotOptions: {
      series: {
        events: {
          hide: function(e) { 
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          },
          show: function() {
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          }
        }
      }, 
    }