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

Question

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

Answer 1

API 引用 plotOptions.series.marker.symbol

symbol: String

A predefined shape or symbol for the marker. When null, the symbol is pulled from options.symbols. Other possible values are "circle", "square", "diamond", "triangle" and "triangle-down".

Additionally, the URL to a graphic can be given on this form: "url(graphic.png)". Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server.

Custom callbacks for symbol path generation can also be added to Highcharts.SVGRenderer.prototype.symbols. The callback is then used by its method name, as shown in the demo.

就像在上面的最后一段中一样，我们将定义用于创建加号的符号路径。这是文档中关于 Renderer.path 的内容

Add a path based on SVG's path commands. In SVG capable browsers all path commands are supported, but in VML only a subset is supported: absolute moveTo (M), absolute lineTo (L), absolute curveTo (C) and close (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;
}

用文字解释数组

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':我们关闭渲染器/笔

Custom Marker Symbol @jsFiddle