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

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

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

我需要的是在特定时间（xAxis）添加一些形状，因此我需要它接受x/y值作为图表坐标（而不是画布坐标）（我显然怀疑这是可能的），或者我们需要获得图表中特定点的x/y画布位置

---

有什么方法可以做到这一点吗？

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

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] 

---

可以通过以下方式扩展现有符号：

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

---

演示

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

第一条路

获取此形状的x坐标： 正如您所知，highstock使用unix时间，因此假设您希望在X data=132684454000处添加形状，现在根据系列[i]获得132684454000的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="")

var myrect=$（“.highcharts系列组”）；
$（myrect）.append（这似乎是一个很好的方法，但我似乎没有弄好！我想定义我自己的圆，比方说，我可以把它放在所需的x/y位置，但是如果我在数据部分中更改x/y值，它只会在圆保持原样的情况下调整x轴。这里的示例（在本例中使用正方形）：您的“第一种方式”是我迄今为止解决问题的方式，但它仍然不是“完美的”。似乎与确切位置有一些偏差，我不知道……我也不太理解你的“推荐方式”……你能补充一些解释性的词语吗？：）