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

Question

我正在尝试扩展 highcharts 以包含一个十字符号。我的 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

您可以使用准备十字作为图像，然后将其用作符号，如示例中的其他图像：

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)'
                }