HighCharts-带指示器的条形图

Question

我看到了如何在HighCharts中制作堆叠的条形图和柱形图。 但是，我希望能够在条形图/列之外放置一个箭头以指示其中的点，类似于： http : //support.sas.com/kb/26/addl/fusion_26104_4_slider_alert.gif

在HighCharts中这可能吗？ 我找不到它的例子。

Answer 1

当然可以。

有两种方法可以实现此目的。

1. 使用散点图。

在此方法中，您将构建一个addl散点图系列。 散点图系列的值将帮助您将其定位在此处http://jsfiddle.net/p2MF6/

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

2. 渲染图像。

使用chart.rendere.image(src,x,y,length,height)可以在图表上渲染任何图像。

查找坐标并不重要。

希望这是你要找的

Answer 2

适合您的示例： http : //jsbin.com/oyudan/276/edit

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

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

Answer 3

如果您确实需要在此处使用符号，则可以使用上面所回答的分散系列方法。

您还可以绘制plotLine：

http://api.highcharts.com/highcharts#yAxis.plotLines

当然，其中将不包括箭头，但是您可以通过这种方式绘制线条和标签，而IMO当时确实不需要该箭头。 第一次世界大战