3

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

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

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

有没有办法做到这一点？

4

3 回答 3

2

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

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

这是一个小提琴证明

于 2012-07-03T13:52:42.173 回答
1

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

第一种方式

获取此形状的 x 坐标：如您所知，highstock 使用 unix 时间，所以假设您想在 X 数据 = 1326844540000 处添加您的形状，现在根据 series[i] 获取 1326844540000 的 x 位置我会假设您有一个系列，所以使用 series[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) 并且还会加载

推荐的方式

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

更新

  • 如果您在缩放时默认为图表添加一个标志，则转换时您不必担心每次 rangeselector 或缩放更改时都会移动您的元素。
  • 如果你给你的标志 id 它将很容易使用 jquery 选择
  • 看到这个： 在此处输入图像描述
  • 突出显示的标签中的第四条路径<g>是您将编辑的内容以绘制您想要的任何内容
于 2012-07-03T14:11:33.957 回答
1

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

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-03T12:55:03.390 回答