如何使用Highcharts SVG渲染器？

如何使用SVG渲染器

SVG 渲染器允许直接访问 Highcharts 的渲染层，以便直接在图表上绘制基本形状，如圆形、矩形、路径或文本，或者独立于任何图表之外。它代表了一个 SVG 的 JavaScript 包装对象。

独立使用

作为一个独立的API，Highcharts渲染器是一个方便的抽象，用于在浏览器中绘制矢量图形。

js 复制代码

const renderer = new Highcharts.SVGRenderer(
    document.getElementById('container'),
    600,
    400
);

一旦实例化渲染器，就可以用它在 SVG 上绘制基本形状。常用元素包括 rect, circle, path, label 和 text，以及分组元素 g 和其他方法。请参阅类参考class
reference

获取完整列表和实时演示。

js 复制代码

renderer.circle(100, 100, 50).attr({
    fill: 'red',
    stroke: 'black',
    'stroke-width': 1
}).add();

renderer.text('Hello world', 200, 100).attr({
    rotation: 45
}).css({
    fontSize: '16pt',
    color: 'green'
}).add();

赋予它生命

所有生成的元素都可以动态更新，可以立即通过 attr方法进行修改，或者通过 animate 方法实现动画效果。查看这个演示，了解一些带动画的简单元素：

将其应用到图表中

虽然自由绘图功能是一个不错的特性，但当它可以用于在图表上绘制自定义图形时，渲染器变得非常有用。

每个Chart实例都拥有自己对渲染器的引用。可以通过它直接在图表的SVG上绘制形状。

将自定义绘图集成到图表渲染流程中的最佳方法是监听chart.events.render事件。这个事件非常适合这个目的，因为它在首次渲染时触发，以及每次图表因更新数据、选项或容器尺寸而重新绘制时也会触发。详细内容请看下面。

render事件处理器可以通过两种不同的方式分配。

将其添加到选项结构中，chart.events.render。这适用于每个实例。
另外，也可以将其添加到 Chart 类中，这样所有实例都会应用。 Highcharts.addEvent(Highcharts.Chart, 'render', eventHandler)。这种方法更具模块化，便于保持配置结构的整洁，但需要用到其他选项，比如 chart.className，以便识别不同的图表。更多关于 addEvent 的内容，以及查看 addEvent and render demo。

添加响应式形状

让我们更详细地了解如何创建一个自定义注释，并在更改图表大小时保持其位置。

查看渲染器在图表上的演示 renderer on a chart.

在这种情况下，注释与这个特定的图表紧密相关，因此我们希望在选项结构中添加 render 事件处理程序。我们正在构建的图表是一个显示降水量的柱状图。为了演示的需要，我们希望显示一个括号和一段文字，以吸引注意力，突出通常的秋季降雨月份。此外，由于图表是响应式的，会根据包含它的 div 的大小进行缩放，因此这个元素也需要能够缩放。

在第一次调用render事件时，我们创建元素。

js 复制代码

let isNew = false;
if (!this.autumnBracket) {
    this.autumnBracket = this.renderer.path()
        .attr({
            stroke: '#333333',
            'stroke-width': 1
        })
        .add();
    this.autumnText = this.renderer.text('Autumn months')
        .attr({
            'text-anchor': 'middle'
        })
        .css({
            fontStyle: 'italic'
        })
        .add();
    isNew = true;
}

请注意，我们尚未提供实际的路径定义，也未设置文本的x和y位置。我们所做的是直接在图表实例（this）上注册元素，这样后续的渲染事件就会拾取并重用它们，而不是创建新的元素。另请注意，我们定义了一个标志（isNew），我们将在下面使用。

在进行一些数学计算以确定元素的准确位置后，我们进行实际的放置：

js 复制代码

this.autumnBracket[isNew ? 'attr' : 'animate']({
    d: [
        ['M', left, top + 10],
        ['L', left, top],
        ['L', right, top],
        ['L', right, top + 10]
    ]
});
this.autumnText[isNew ? 'attr' : 'animate']({
    x: (right + left) / 2,
    y: top - 5
});

这个定位在首次绘制和后续重绘时都起作用。唯一的区别是我们使用 isNew 标志来判断元素是否是新创建的。如果 isNew 为真，我们会运行 attr 函数，因为我们不希望从 [0, 0] 位置开始动画。如果 isNew 为假，意味着该元素是在之前的渲染调用中创建的，这也就意味着我们希望与其他原生图表元素一起实现平滑的动画过渡到新位置。

在这里查看完整示例，并注意如果你改变视口大小，元素会重新定位：

在图表上定位元素

在上面的演示中，我们使用了 Point.pos()来决定如何绘制我们的注释。在放置自定义图形到图表上时，其他一些定位属性也很有用：

Chart.plotLeft
and
Chart.plotTop
反映了绘图区的位置。
Chart.plotWidth
and
Chart.plotHeight
反映了绘图区的大小，可以与前者结合使用，找到右边和底部的位置。
轴位置Axis.pos and
轴长度Axis.len
通常与上述相同，因为轴通常填满整个绘图区。例外情况是当轴通过 left 或 top 选项进行特殊定位时。
Series.center
系列中心属性适用于饼图和旭日图等环形系列类型。