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

我在Highcharts中有一个图表（具体来说：这是一个Highstocks图表，蜡烛图类型），现在我想为它添加一些SVG形状。如何在特定位置绘制SVG形状（取决于xAxis）

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

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

有没有办法做到这一点？

2012-07-03 Michel Michael Meyer

要绘制SVG形状和变焦移动它扩展现有的符号，有两种方式我用的第一个只是把它作为一个想法，看看你是否可以做得比我好，第二种方式总是有效

第一种方式

得到这个形状的x坐标：如你所知highstock使用unix时间，所以假设你想要在X数据= 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）A第二Ønchart负载以及

推荐的方式

建议和存在保证的方法是创建一个标志给它一个ID，然后您可以通过编辑这个标志

的 attr()你什么都想要

UPDATE

如果您在默认情况下添加一个标志，图表标志放大，所以当变换你不需要是有关移动忧每次选择范围选择器或缩放比例时更改元素。
，如果你给你的标志标识将使用jQuery
看到这个很容易选择：
在突出<g>标签的第四路径是，您将编辑吸引你什么都想要什么

来源

2012-07-03 14:11:33

您的“第一条路”是迄今为止我解决问题的方式，但它仍然不是“完美”的。似乎有一些偏离的确切位置，不知道... 而我不完全理解你的“推荐的方式”...你可以请添加一些解释词？ :) –

检查更新 –

您可以使用图形来替换某个数据点。以下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]

来源

2012-07-03 12:55:03 Linger

您可以通过

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

Here is a fiddle表明

来源

2012-07-03 13:52:42 Grooveek

这似乎是一个不错的方法，但我似乎并没有把它做对！我想定义我自己的，比方说，我可以放在所需的x/y位置的圆，但是如果我更改数据部分内的x/y值，它只会调整xAxis，而圆则保持正确它在哪里。这里的例子（在这种情况下用正方形）：[Example]（http://jsfiddle.net/X3EA7/） –

小提琴似乎不再起作用。 –

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

回答

相关问题