如何在特定位置绘制SVG形状（取决于xAxis）

Question

我在Highcharts中有一个图表（更具体一点：它是一个Highstocks图表，烛台类型），现在我想添加一些SVG形状。

我知道有这个渲染器对象，但它只接受相对于画布的x和y坐标。

我需要的是在特定的时间（xAxis）添加一些形状，所以我需要它接受x / y值作为图表坐标（不是画布坐标）（我明显怀疑是可能的）或者我们需要获取图表中特定点的x / y-canvas位置。

有没有办法做到这一点？

Answer 1

您可以通过

扩展现有符号

$.extend(Highcharts.Renderer.prototype.symbols, {
    newSymbol: function() {
        return [//SVG path as Array];
    }
});

Here is a fiddle证明

Answer 2

您可以使用图形替换某个数据点。以下example演示了此功能。在下面的示例中，特定点正在被图形替换。它恰好是需要绘制的最高点。

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
  y: 26.5,
  marker: {symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'}
}, 23.3, 18.3, 13.9, 9.6] 

Answer 3

要绘制SVG形状并使用缩放移动它，有两种方法我使用第一种只是把它作为一个想法，看看你是否能比我更好，第二种方式总是有效

第一种方式

获取此形状的x坐标：     你知道highstock使用unix时间，所以假设你要在X data = 1326844540000处添加你的形状，现在按照系列[i]得到1326844540000的x位置我将假设你有一个系列所以使用系列[0] ，这是你如何得到x-coor：

               $.each(chart.series[0].points, function(index,value){
                         if(value.category == 1326847170000 ) 
                         console.log(this.plotX) ;
                 });

现在使用.append()添加您的SVG：

   var myrect = $(".highcharts-series-group") ; 
    $(myrect).append(<your svg goes here with 
            x ="you have it from the previous code " y="")

此代码将进入内部（xAxis - events - setExtremes）以及ochart加载

推荐方式

建议和保证的方法是创建一个标志给它一个id然后你可以通过编辑这个标志的attr()来做任何你想做的事情

更新

• 如果您在图表标记中添加一个标记，默认情况下在缩放时进行变换，这样您就不必担心每次使用范围选择器或变焦时都要移动元素。
• 如果您提供了您的国旗ID，则可以使用jquery
轻松选择
• 看到这个：
• 突出显示的<g>标记中的第四个路径是您要编辑的内容，以绘制您想要的内容