开源图表库Highcharts教程：Highcharts事件介绍

对于几乎所有的Highcharts功能，都有一堆事件会释放一套完整的自定义交互，用户可以对您的图表进行交互。在本文中，我们将向您展示图表功能内Highcharts事件的基本概念，以及如何/何时使用它们。

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

对于几乎所有的Highcharts功能，都有一堆事件会释放一套完整的自定义交互，用户可以对您的图表进行交互。

在本文中，我们将向您展示图表功能内Highcharts事件的基本概念，以及如何/何时使用它们。

让我们从下面的演示中的基本图表事件开始：

• 放大。
• 点击图表。
• 调整窗口大小。
• 更改系列类型。

当用户与图表进行交互（例如放大，图表大小调整等）时，会发生事件。图表上的每个事件都有一个事件侦听器或处理程序，该事件侦听器或处理程序在事件发生时触发。例如，以下代码为上述每个事件显示一条消息：

  chart: {    events: {      click: function() {        let message = `Click event- fired after ${new Date() - start} ms. <br>`        text.innerHTML += message;      },      load: function() {        let message = `Load event- fired after ${new Date() - start} ms. <br>`        text.innerHTML += message;      },      render: function() {        let message = `Render event- fired after ${new Date() - start} ms. <br>`        text.innerHTML += message;      },      redraw: function() {        let message = `Redraw event- fired after ${new Date() - start} ms. <br>`        text.innerHTML += message;      },      selection: function() {        let message = `Selection event- fired after ${new Date() - start} ms. <br>`        text.innerHTML += message;      },    },    zoomType: 'x'  },

这是上面演示中使用的事件的解释：

载入事件

即使在渲染阶段之前，load事件也是第一个要触发的事件。顺便说一句，在图表创建开始时只会触发一次加载事件。这就是为什么这部分代码通常用于：

• 处理静态/硬编码数据。
• 更新图表选项。

渲染事件

渲染事件是一个非常通用且功能强大的事件。在加载阶段和其他一些事件之后触发。基本上，只要图表中发生任何更改，都会触发此事件。

必须谨慎对待此函数，因为您可能会意外地与此事件一起创建无限循环。

以下是如何使用此事件的示例：

• 处理动态加载的数据。
• 使用SVG渲染器添加自定义响应路径

重绘事件

重绘事件通常可以在渲染之前看到。请注意，在初始图表绘制阶段不会触发此事件。

但是，此功能有一个非常流行的用例–迫使图表再次重新呈现。一次处理大量更新时非常有用：

每次更新后，都会调用重绘函数。为了获得更好的性能，建议避免每次通过向update方法添加第二个参数（’false’）来调用重绘函数。接下来，当所有点都更新后，您可以强制图表重绘一次。如这个简单的示例所示，渲染时间可以缩短大约十倍：

单击事件

单击事件仅在单击图表绘图区域后才会触发。如果在移动设备上显示了图表，则触摸时也会触发所有点击事件。它有助于与用户进行交互，通常用于获取单击点的坐标以用于其他功能。请注意，除非您禁用enableMouseTracking属性，否则单击系列或点将不会触发此事件。

单击下面的图表以查看正在使用的enableMouseTracking属性：

选择事件

在选择图表上的区域后，将触发选择事件。当开发人员需要知道所选区域的确切坐标时，这可能会很有用。在下面的示例中，可以在放大或缩小后更改字幕。

在下面的图表上选择一个部分以触发选择事件：

现在，您知道如何使用图表属性事件，随时创建演示并探索Highcharts事件的功能。

想要购买Highcharts正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都