将highcharts渲染器符号扩展为具有加号 [英] Extend highcharts renderer symbols to have plus sign

问题描述

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

解决方案

API参考

How can I extend highcharts renderer symbols library to include a "Plus" sign.

解决方案

API Reference of 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.

Like in the last paragraph above, we would define the symbol path for creating a plus. Here is what the documentaion says about 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).

And this is how the co-ordinate system would look like, the actual point at the centre of a w x h box with its top-left corner placed at (x,y) & y increasing as we move downwards and x increasing as we move towards the right.

Here is how you would do a plus

// 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;
}

To explain the array in words

1. 'M', x, y + h / 2: We move our pen to pt. A (x,y+h/2)
2. 'L', x + w, y + h / 2: We draw a line from the current position to pt. B (x+w,y+h/2). This draws the horizontal line of the plus from A <-> B
3. 'M', x + w / 2, y: We now move the pen to pt. C (x+w/2,y), notice that moving the pen does not create any graphic or line
4. 'L', x + w / 2, y + h: We now draw a line from current position to pt. D(x+w/2,y+h). This draws the vertical line of the plus C <-> D
5. 'z': We close the renderer/pen

Custom Marker Symbol @jsFiddle

这篇关于将highcharts渲染器符号扩展为具有加号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！