HighCharts - 带指标的条形图答案

【问题标题】：HighCharts - bar chart with indicatorHighCharts - 带指标的条形图
【发布时间】：2013-11-05 07:40:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

你也可以画一个plotLine：

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

当然，这不包括箭头，但是您可以以这种方式绘制线和标签，而 IMO 那时真的不需要箭头。 FWIW

【讨论】：

【解决方案3】：

当然可以。

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

使用 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)，您可以在图表上渲染任何图像。

找到坐标没什么大不了的。

希望这就是你要找的东西

【讨论】：