HighCharts - 带指标的条形图

Question

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

HighCharts中可能存在此问题吗？我找不到它的一个例子。

Answer 1

当然这是可能的。

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

1. 使用sctterplot。

在这种方法中，您将构建一个addl散点图系列。在scatterchart系列的价值会帮助你将其定位也喜欢在这里http://jsfiddle.net/p2MF6/

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

渲染图像。

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

找到坐标不是什么大不了的事。

希望这是你在找什么

Answer 2

我会使用散射序列法，如上回答，如果你真的需要一个符号存在。

您也可以得出一个情节主线：

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

这将不包括箭头，当然，但你可以得出这样的线和标签，以及IMO箭头真的没必要在那时候。你FWIW

Answer 3

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