扩展highcharts渲染器符号以具有加号

Question

如何扩展highcharts渲染器符号库以包含＆＃34; Plus＆＃34;登录。

Answer 1

plotOptions.series.marker.symbol

的API参考

  

symbol：String

     

标记的预定义形状或符号。为null时，符号为   从options.symbols中拉出来。其他可能的值是＆＃34; circle＆＃34;，   ＆＃34; square＆＃34;，＆＃34; diamond＆＃34;，＆＃34; triangle＆＃34;和＆＃34;三角形向下＆＃34;。

     

此外，可以在此表单上指定图形的URL：   ＆＃34; URL（graphic.png）＆＃34 ;.请注意，要将图像应用于导出   图表，其URL必须可由导出服务器访问。

     

还可以添加用于生成符号路径的自定义回调   Highcharts.SVGRenderer.prototype.symbols。然后使用回调   它的方法名称，如演示中所示。

与上面的最后一段一样，我们将定义用于创建加号的符号路径。以下是关于Renderer.path

的文件

  

根据SVG的路径命令添加路径。在支持SVG的浏览器中   支持路径命令，但在VML中仅支持一个子集：   绝对moveTo（M），绝对lineTo（L），绝对curveTo（C）和   关闭（Z）。

这就是坐标系统的样子，它位于一个w x h框中心的实际点，其左上角位于（x，y）和＆amp;当我们向右移动时，y会增加，而当我们向右移动时，x会增加。

以下是如何进行加号

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) {
    return ['M', x, y + h / 2, 'L', x + w, y + h / 2, 'M', x + w / 2, y, 'L', x + w / 2, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus;
}

用单词解释数组

1. 'M', x, y + h / 2：我们将笔移到pt。 A（x，y + h / 2）
2. 'L', x + w, y + h / 2: 我们从当前位置划线到pt。 B（x + w，y + h / 2）。这绘制了来自A＆lt; - ＆gt;的加号的水平线。乙
3. 'M', x + w / 2, y: 我们现在将笔移到pt。 C（x + w / 2，y），注意移动笔不会创建任何图形或线
4. 'L', x + w / 2, y + h: 我们现在从当前位置到pt画一条线。 d（X + W / 2，Y + H）。这绘制了加号C＆lt; - ＆gt;的垂直线。 d
5. 'z': 我们关闭了渲染器/笔

Custom Marker Symbol @jsFiddle

Answer 2

接受的答案每个交叉只提供一行。我想要一个完全填写的加号。以下是代码：

Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h) {
    return [
        'M', x, y + (5 * h) / 8,
        'L', x, y + (3 * h) / 8,
        'L', x + (3 * w) / 8, y + (3 * h) / 8,
        'L', x + (3 * w) / 8, y,
        'L', x + (5 * w) / 8, y,
        'L', x + (5 * w) / 8, y + (3 * h) / 8,
        'L', x + w, y + (3 * h) / 8,
        'L', x + w, y + (5 * h) / 8,
        'L', x + (5 * w) / 8, y + (5 * h) / 8,
        'L', x + (5 * w) / 8, y + h,
        'L', x + (3 * w) / 8, y + h,
        'L', x + (3 * w) / 8, y + (5 * h) / 8,
        'L', x, y + (5 * h) / 8,
        'z'
    ];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.plus = Highcharts.SVGRenderer.prototype.symbols.plus;
}

这将为每个条形成25％宽度的加号。