Javascript 扩展highcharts渲染器符号，使其具有加号

如何扩展highcharts渲染器符号库以包含加号。

API参考

符号：字符串

标记的预定义形状或符号。如果为null，则符号为 从options.symbols中提取。其他可能的值为“圆”， “正方形”、“菱形”、“三角形”和“三角形向下”

此外，可在此表格中提供图形的URL： “url（graphic.png）”。请注意，对于要应用于导出的图像 图表，其URL需要可由导出服务器访问

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

与上面最后一段一样，我们将定义创建加号的符号路径。以下是这部纪录片的内容

根据SVG的path命令添加路径。在支持SVG的浏览器中，所有 支持path命令，但在VML中仅支持一个子集： 绝对移动到（M）、绝对直线到（L）、绝对曲线到（C）和 关闭（Z）

这就是坐标系的样子，实际点在一个w x h盒子的中心，它的左上角位于（x，y）&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;
}

用文字解释数组

'M'，x，y+h/2

：我们将笔移到pt。A（x，y+h/2）

'L'，x+w，y+h/2:

我们从当前位置到pt画一条线。B（x+w，y+h/2）。这将从A到B绘制加号的水平线

'M'，x+w/2，y:

我们现在将笔移动到pt。C（x+w/2，y），请注意，移动画笔不会创建任何图形或线条

'L'，x+w/2，y+h:

我们现在从当前位置到pt画一条线。D（x+w/2，y+h）。这将绘制正C D的垂直线

'z'：

我们关闭渲染器/画笔

---

被接受的答案在每个十字架上只给出一行。我想要一个完整的加号。以下是执行此操作的代码：

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%宽度的加号。

使用图像演示@Thank man。你能解释一下这是怎么回事吗？我还需要一个按钮符号。JabranSaeed在回答中添加了3个点，类似于…。这非常有用！非常感谢您添加如此详细的描述和图片。非常欢迎@Aaron感谢您的欣赏，帮助您继续；）