1

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

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

4

3 回答 3

5

当然这是可能的。

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

  1. 使用 sctterplot。

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

{
                name: 'indicator',
                data: [5],
                type: 'scatter',
                marker:{
                    //here you can have your url
                    symbol: 'circle',
                }
            }
  1. 渲染图像。

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

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

希望这就是你要找的

于 2013-10-26T11:05:40.723 回答
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'); 
          }
        }
      }, 
    }
于 2013-10-28T10:56:41.683 回答
0

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

您还可以绘制 plotLine：

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

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

于 2013-10-27T14:39:16.523 回答