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事件的功能。