Class: SVGRenderer

Highcharts. SVGRenderer

new SVGRenderer(container, width, height [, style] [, forExport] [, allowHTML] [, styledMode])

Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, rectangles, paths or text directly on a chart, or independent from any chart. The SVGRenderer represents a wrapper object for SVG in modern browsers. Through the VMLRenderer, part of the oldie.js module, it also brings vector graphics to IE <= 8.

An existing chart's renderer can be accessed through Highcharts.Chart.renderer. The renderer can also be used completely decoupled from a chart.

参数:
名字 类型 特质 默认值 详情
container Highcharts.HTMLDOMElement

Where to put the SVG in the web page.

width number

The width of the SVG.

height number

The height of the SVG.

style Highcharts.CSSObject <可选>

The box style, if not in styleMode

forExport boolean <可选>
false

Whether the rendered content is intended for export.

allowHTML boolean <可选>
true

Whether the renderer is allowed to include HTML text, which will be projected on top of the SVG.

styledMode boolean <可选>
false

Whether the renderer belongs to a chart that is in styled mode. If it does, it will avoid setting presentational attributes in some cases, but not when set explicitly through .attr and .css etc.

Example
// Use directly without a chart object.
let renderer = new Highcharts.Renderer(parentNode, 600, 400);
在线示例

成员

box :Highcharts.SVGDOMElement

The root svg node of the renderer.

Type:

boxWrapper :Highcharts.SVGElement

The wrapper for the root svg node of the renderer.

Type:

defs :Highcharts.SVGElement

A pointer to the defs node of the root SVG.

Type:

Element :Highcharts.SVGElement

A pointer to the renderer's associated Element class. The VMLRenderer will have a pointer to VMLElement here.

Type:

escapes :Highcharts.Dictionary.<string>

A collection of characters mapped to HTML entities. When useHTML on an element is true, these entities will be rendered correctly by HTML. In the SVG pseudo-HTML, they need to be unescaped back to simple characters, so for example &lt; will render as <.

Type:
  • Highcharts.Dictionary.<string>
示例
// Add support for unescaping quotes
Highcharts.SVGRenderer.prototype.escapes['"'] = '&quot;';

symbols :Highcharts.SymbolDictionary

An extendable collection of functions for defining symbol paths.

Type:

方法

arc( [x] [, y] [, r] [, innerR] [, start] [, end])

Draw and return an arc.

参数:
名字 类型 特质 默认值 详情
x number <可选>
0

Center X position.

y number <可选>
0

Center Y position.

r number <可选>
0

The outer radius' of the arc.

innerR number <可选>
0

Inner radius like used in donut charts.

start number <可选>
0

The starting angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.

end number <可选>
0

The ending angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

在线示例

arc(attribs)

Draw and return an arc. Overloaded function that takes arguments object.

参数:
名字 类型 详情
attribs Highcharts.SVGAttributes

Initial SVG attributes.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

button(text, x, y, callback [, theme] [, hoverState] [, pressedState] [, disabledState] [, shape] [, useHTML])

Create a button with preset states.

参数:
名字 类型 特质 默认值 详情
text string

The text or HTML to draw.

x number

The x position of the button's left side.

y number

The y position of the button's top side.

callback Highcharts.EventCallbackFunction.<Highcharts.SVGElement>

The function to execute on button click or touch.

theme Highcharts.SVGAttributes <可选>

SVG attributes for the normal state.

hoverState Highcharts.SVGAttributes <可选>

SVG attributes for the hover state.

pressedState Highcharts.SVGAttributes <可选>

SVG attributes for the pressed state.

disabledState Highcharts.SVGAttributes <可选>

SVG attributes for the disabled state.

shape Highcharts.SymbolKeyValue <可选>
rect

The shape type.

useHTML boolean <可选>
false

Wether to use HTML to render the label.

返回值:
Highcharts.SVGElement .

The button element.

circle( [x] [, y] [, r])

Draw a circle, wraps the SVG circle element.

参数:
名字 类型 特质 详情
x number <可选>

The center x position.

y number <可选>

The center y position.

r number <可选>

The radius.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

在线示例

circle( [attribs])

Draw a circle, wraps the SVG circle element.

参数:
名字 类型 特质 详情
attribs Highcharts.SVGAttributes <可选>

The initial attributes.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

clipRect( [x] [, y] [, width] [, height])

Define a clipping rectangle. The clipping rectangle is later applied to Highcharts.SVGElement objects through the Highcharts.SVGElement#clip function.

参数:
名字 类型 特质 详情
x number <可选>
y number <可选>
width number <可选>
height number <可选>
返回值:
Highcharts.ClipRectElement .

A clipping rectangle.

Example
let circle = renderer.circle(100, 100, 100)
    .attr({ fill: 'red' })
    .add();
let clipRect = renderer.clipRect(100, 100, 100, 100);

// Leave only the lower right quarter visible
circle.clip(clipRect);

createElement(nodeName)

Create a wrapper for an SVG element. Serves as a factory for Highcharts.SVGElement, but this function is itself mostly called from primitive factories like Highcharts.SVGRenderer#path, Highcharts.SVGRenderer#rect or Highcharts.SVGRenderer#text.

参数:
名字 类型 详情
nodeName string

The node name, for example rect, g etc.

返回值:
Highcharts.SVGElement .

The generated SVGElement.

crispLine(points, width [, roundingFunction])

Make a straight line crisper by not spilling out to neighbour pixels.

参数:
名字 类型 特质 默认值 详情
points Highcharts.SVGPathArray

The original points on the format [['M', 0, 0], ['L', 100, 0]].

width number

The width of the line.

roundingFunction string <可选>
round

The rounding function name on the Math object, can be one of round, floor or ceil.

返回值:
Highcharts.SVGPathArray .

The original points array, but modified to render crisply.

definition(def)

General method for adding a definition to the SVG defs tag. Can be used for gradients, fills, filters etc. Styled mode only. A hook for adding general definitions to the SVG's defs tag. Definitions can be referenced from the CSS by its id. Read more in gradients, shadows and patterns. Styled mode only.

参数:
名字 类型 详情
def Highcharts.ASTNode

A serialized form of an SVG definition, including children.

返回值:
Highcharts.SVGElement .

The inserted node.

destroy()

Destroys the renderer and its allocated members.

返回值:

draw()

Dummy function for plugins, called every time the renderer is updated. Prior to Highcharts 5, this was used for the canvg renderer.

Deprecated:
  • Yes

fontMetrics( [fontSize] [, elem])

Utility to return the baseline offset and total line height from the font size.

参数:
名字 类型 特质 详情
fontSize number | string <可选>

The current font size to inspect. If not given, the font size will be found from the DOM element.

elem Highcharts.SVGElement | Highcharts.SVGDOMElement <可选>

The element to inspect for a current font size.

返回值:
Highcharts.FontMetricsObject .

The font metrics.

g( [name])

Create and return an svg group element. Child Highcharts.SVGElement objects are added to the group by using the group as the first parameter in add().

参数:
名字 类型 特质 详情
name string <可选>

The group will be given a class name of highcharts-{name}. This can be used for styling and scripting.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

getContrast(rgba)

Returns white for dark colors and black for bright colors.

参数:
名字 类型 详情
rgba Highcharts.ColorString

The color to get the contrast for.

返回值:
Highcharts.ColorString .

The contrast color, either #000000 or #FFFFFF.

image(src [, x] [, y] [, width] [, height] [, onload])

Display an image.

参数:
名字 类型 特质 详情
src string

The image source.

x number <可选>

The X position.

y number <可选>

The Y position.

width number <可选>

The image width. If omitted, it defaults to the image file width.

height number <可选>

The image height. If omitted it defaults to the image file height.

onload function <可选>

Event handler for image load.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

在线示例

init(container, width, height [, style] [, forExport] [, allowHTML] [, styledMode])

Initialize the SVGRenderer. Overridable initializer function that takes the same parameters as the constructor.

参数:
名字 类型 特质 默认值 详情
container Highcharts.HTMLDOMElement

Where to put the SVG in the web page.

width number

The width of the SVG.

height number

The height of the SVG.

style Highcharts.CSSObject <可选>

The box style, if not in styleMode

forExport boolean <可选>
false

Whether the rendered content is intended for export.

allowHTML boolean <可选>
true

Whether the renderer is allowed to include HTML text, which will be projected on top of the SVG.

styledMode boolean <可选>
false

Whether the renderer belongs to a chart that is in styled mode. If it does, it will avoid setting presentational attributes in some cases, but not when set explicitly through .attr and .css etc.

isHidden()

Detect whether the renderer is hidden. This happens when one of the parent elements has display: none. Used internally to detect when we needto render preliminarily in another div to get the text bounding boxes right.

返回值:
boolean .

True if it is hidden.

label(str, x [, y] [, shape] [, anchorX] [, anchorY] [, useHTML] [, baseline] [, className])

Draw a label, which is an extended text element with support for border and background. Highcharts creates a g element with a text and a path or rect inside, to make it behave somewhat like a HTML div. Border and background are set through stroke, stroke-width and fill attributes using the attr method. To update the text after render, run label.attr({ text: 'New text' }).

参数:
名字 类型 特质 默认值 详情
str string

The initial text string or (subset) HTML to render.

x number

The x position of the label's left side.

y number <可选>

The y position of the label's top side or baseline, depending on the baseline parameter.

shape string <可选>
'rect'

The shape of the label's border/background, if any. Defaults to rect. Other possible values are callout or other shapes defined in Highcharts.SVGRenderer#symbols.

anchorX number <可选>

In case the shape has a pointer, like a flag, this is the coordinates it should be pinned to.

anchorY number <可选>

In case the shape has a pointer, like a flag, this is the coordinates it should be pinned to.

useHTML boolean <可选>
false

Wether to use HTML to render the label.

baseline boolean <可选>
false

Whether to position the label relative to the text baseline, like renderer.text, or to the upper border of the rectangle.

className string <可选>

Class name for the group.

返回值:
Highcharts.SVGElement .

The generated label.

在线示例

path( [path])

Draw a path, wraps the SVG path element.

参数:
名字 类型 特质 详情
path Highcharts.SVGPathArray <可选>

An SVG path definition in array form.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

Example
let path = renderer.path(['M', 10, 10, 'L', 30, 30, 'z'])
    .attr({ stroke: '#ff00ff' })
    .add();
在线示例

path( [attribs])

Draw a path, wraps the SVG path element.

参数:
名字 类型 特质 详情
attribs Highcharts.SVGAttributes <可选>

The initial attributes.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

rect( [x] [, y] [, width] [, height] [, r] [, strokeWidth])

Draw and return a rectangle.

参数:
名字 类型 特质 详情
x number <可选>

Left position.

y number <可选>

Top position.

width number <可选>

Width of the rectangle.

height number <可选>

Height of the rectangle.

r number <可选>

Border corner radius.

strokeWidth number <可选>

A stroke width can be supplied to allow crisp drawing.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

rect( [attributes])

Draw and return a rectangle.

参数:
名字 类型 特质 详情
attributes Highcharts.SVGAttributes <可选>

General SVG attributes for the rectangle.

返回值:
Highcharts.SVGElement .

The generated wrapper element.

在线示例

setSize(width, height [, animate])

Resize the Highcharts.SVGRenderer#box and re-align all aligned child elements.

参数:
名字 类型 特质 默认值 详情
width number

The new pixel width.

height number

The new pixel height.

animate boolean | Partial.<Highcharts.AnimationOptionsObject> <可选>
true

Whether and how to animate.

在线示例

setStyle(style)

Apply the global style on the renderer, mixed with the default styles.

参数:
名字 类型 详情
style Highcharts.CSSObject

CSS to apply.

symbol(symbol [, x] [, y] [, width] [, height] [, options])

Draw a symbol out of pre-defined shape paths from Highcharts.SVGRenderer#symbols. It is used in Highcharts for point makers, which cake a symbol option, and label and button backgrounds like in the tooltip and stock flags.

参数:
名字 类型 特质 详情
symbol string

The symbol name.

x number <可选>

The X coordinate for the top left position.

y number <可选>

The Y coordinate for the top left position.

width number <可选>

The pixel width.

height number <可选>

The pixel height.

options Highcharts.SymbolOptionsObject <可选>

Additional options, depending on the actual symbol drawn.

返回值:

text( [str] [, x] [, y] [, useHTML])

Draw text. The text can contain a subset of HTML, like spans and anchors and some basic text styling of these. For more advanced features like border and background, use Highcharts.SVGRenderer#label instead. To update the text after render, run text.attr({ text: 'New text' }).

参数:
名字 类型 特质 默认值 详情
str string <可选>

The text of (subset) HTML to draw.

x number <可选>

The x position of the text's lower left corner.

y number <可选>

The y position of the text's lower left corner.

useHTML boolean <可选>
false

Use HTML to render the text.

返回值:
Highcharts.SVGElement .

The text object.

在线示例