自定義 highcharts 圖例之 symbol

最近接到個需求，需要更改 highcharts 圖例（legend）標簽前的小圖標（symbol）,於是立刻去 highcharts 官網 api 查找，發現並沒有自定圖標的屬性。最后 google 了一番，查找到了兩種方法實現，在此記錄一下，防止以后用到。

話不多說，先上效果圖
也可以直接訪問示例代碼 ： https://jshare.com.cn/columns/JEOAzo

方法一（推薦）

原理 :
  將圖例原來的圖標隱藏或不顯示，由於在 highcharts 中，圖例的 label 是可以格式化的，所以借此來自定義圖標樣式
步驟 :
1、在 legend 中設置 symbol 的大小為 0.01（使其不顯示，接近 none 的效果，不能設置為0, 0 是沒有效果的）
2、設置 legend 的 labelFormatter，在格式化函數中自定義顯示內容

legend: {
  useHTML: true, // 設置允許使用 html
  // 使 legend 自帶的 symbol 顯示為 none 效果
  symbolWidth: 0.001,
  symbolHeight: 0.001,
  symbolRadius: 0.001,
  labelFormatter() { // 格式化 legend 的 label
    // 這里的內容根據需求自行編寫
    let img = '\<\img src = "圖片地址" width="14px" height="14px"\>'
    return img + ' ' + this.name
  }
}

備注: 此方法適用於任何圖形,擴展性高，並且可以使用 html 進行自定義（需設置 useHTML:true）

方法二（不推薦）

原理 :
  在數據為null的情況下，marker 的 symbol 樣式跟圖例的 symbol 是一致的，所以此方法采取了取巧的方式
步驟 :
1、在 sries 中構造 n組（原始series的長度） null 數據，設置 market 的 symbol 屬性，使用圖片
2、設置原始數據的 showInLegend 為 false,不顯示真正數據的 legend

series: [{
  name: '小張',
  data: [5, 3, 4, 7, 2],
  showInLegend: false
}, {
  name: '小張（構造的null數據）',
  data: null,
  marker: {
    symbol: 'url(圖片地址)'
  }
}]

備注: 由於該方法對圖形類型具有局限性（這里只試了 column 和 line 類型），所以不推薦使用，只作為擴展備用。
1、該方法需要該圖有 market 屬性（column圖沒有該屬性，則不生效）
2、在 line 圖中，需在 legend 中設置 symbolWidth: 0.001（去掉 legend symbol 中的橫線）
該方法可能有更多圖形類型不支持，故建議使用第一種方法