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

Question

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

Answer 1

plotOptions.series.marker.symbol的 API参考

符号:字符串

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

此外,图形的URL可以在此表单中给出:"url(graphic.png)".请注意,对于要应用于导出图表的图像,导出服务器可以访问其URL.

生成符号路径的自定义回调也可以添加到Highcharts.SVGRenderer.prototype.symbols.然后回调由其方法名称使用,如演示中所示.

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

根据SVG的路径命令添加路径.在支持SVG的浏览器中,支持所有路径命令,但在VML中仅支持子集:绝对moveTo(M),绝对lineTo(L),绝对curveTo(C)和close(Z).

这就是坐标系统的样子,awxh框中心的实际点,其左上角位于(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;
}

用文字解释数组

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 < - > B绘制加号的水平线
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 < - > D的垂直线
5. 'z': 我们关闭渲染器/笔

自定义标记符号@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% 宽度的加号。