Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網(wǎng)站、Web應(yīng)用程序提供直觀、交互式圖表。當前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

對于幾乎所有的Highcharts功能，都有一堆事件會釋放一套完整的自定義交互，用戶可以對您的圖表進行交互。

在本文中，我們將向您展示圖表功能內(nèi)Highcharts事件的基本概念，以及如何/何時使用它們。

讓我們從下面的演示中的基本圖表事件開始：

• 放大。
• 點擊圖表。
• 調(diào)整窗口大小。
• 更改系列類型。

當用戶與圖表進行交互（例如放大，圖表大小調(diào)整等）時，會發(fā)生事件。圖表上的每個事件都有一個事件偵聽器或處理程序，該事件偵聽器或處理程序在事件發(fā)生時觸發(fā)。例如，以下代碼為上述每個事件顯示一條消息：

  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事件也是第一個要觸發(fā)的事件。順便說一句，在圖表創(chuàng)建開始時只會觸發(fā)一次加載事件。這就是為什么這部分代碼通常用于：

• 處理靜態(tài)/硬編碼數(shù)據(jù)。
• 更新圖表選項。

渲染事件

渲染事件是一個非常通用且功能強大的事件。在加載階段和其他一些事件之后觸發(fā)。基本上，只要圖表中發(fā)生任何更改，都會觸發(fā)此事件。

必須謹慎對待此函數(shù)，因為您可能會意外地與此事件一起創(chuàng)建無限循環(huán)。

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

• 處理動態(tài)加載的數(shù)據(jù)。
• 使用SVG渲染器添加自定義響應(yīng)路徑

重繪事件

重繪事件通常可以在渲染之前看到。請注意，在初始圖表繪制階段不會觸發(fā)此事件。

但是，此功能有一個非常流行的用例–迫使圖表再次重新呈現(xiàn)。一次處理大量更新時非常有用：

每次更新后，都會調(diào)用重繪函數(shù)。為了獲得更好的性能，建議避免每次通過向update方法添加第二個參數(shù)（'false'）來調(diào)用重繪函數(shù)。接下來，當所有點都更新后，您可以強制圖表重繪一次。如這個簡單的示例所示，渲染時間可以縮短大約十倍：

單擊事件

單擊事件僅在單擊圖表繪圖區(qū)域后才會觸發(fā)。如果在移動設(shè)備上顯示了圖表，則觸摸時也會觸發(fā)所有點擊事件。它有助于與用戶進行交互，通常用于獲取單擊點的坐標以用于其他功能。請注意，除非您禁用enableMouseTracking屬性，否則單擊系列或點將不會觸發(fā)此事件。

單擊下面的圖表以查看正在使用的enableMouseTracking屬性：

選擇事件

在選擇圖表上的區(qū)域后，將觸發(fā)選擇事件。當開發(fā)人員需要知道所選區(qū)域的確切坐標時，這可能會很有用。在下面的示例中，可以在放大或縮小后更改字幕。

在下面的圖表上選擇一個部分以觸發(fā)選擇事件：

現(xiàn)在，您知道如何使用圖表屬性事件，隨時創(chuàng)建演示并探索Highcharts事件的功能。