Question

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

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

Answer 1

当然有可能。

有两种方法可以实现这一目标。

使用sctterplot。

在此方法中，您将构建一个addl散点图系列。散点图系列的值将帮助您将其定位在此处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://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箭头实际上并不是必需的。 FWIW

HighCharts - 带指示器的条形图

3 个答案: