如何将十字架渲染为高图标记？

Question

我试图扩展高级图表以包含十字符号。我的svg路径呈现三角形，我不知道为什么。

由于highcharts不接受实际的svg路径，因此该任务比渲染水平线和垂直线更具挑战性。

我的路径应该这样做：

1. 从中间位置开始
2. 行到底部中间
3. 行到中心

4. 行到左中间

   $.extend(Highcharts.Renderer.prototype.symbols,
   {       
       Cross: function (x, y, w, h) 
       { 
       var trianglesArray = [];
   
       trianglesArray.push('M');
       trianglesArray.push(x + (w * .5));
       trianglesArray.push(y);
   
       trianglesArray.push('L');
       trianglesArray.push(x + (w * .5));
       trianglesArray.push(y + h);
   
       trianglesArray.push('L');
       trianglesArray.push(x + (w * .5));
       trianglesArray.push(y + (h * .5));
   
       trianglesArray.push('L');
       trianglesArray.push(x);
       trianglesArray.push(y + (h * .5));
   
       trianglesArray.push('L');
       trianglesArray.push(x + w);
       trianglesArray.push(y + (h * .5));
   
       trianglesArray.push('z');
   
       return trianglesArray;
     }
   });
   

Answer 1

您可以将prepare cross用作图像，然后将其用作符号，就像在示例中使用其他图像一样：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

 marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
                }