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當時確實不需要該箭頭。 第一次世界大戰