如何將 HighChart 系列圖表的當前樣式導出為 PNG、JPG 或 PDF？

Question

我正在開發一系列效率（百分比）隨時間變化的圖表。

我對圖例有具體要求：

• 單擊圖例項會在圖表上保留該系列，但會淡化線條、標記和圖例項，使它們顯示為“不活動”
• 單擊“非活動”圖例項可取消淡入淡出，因此線條、標記和圖例項顯示為“活動”
• 為每個圖例項添加復選框 - 取消選擇和選擇復選框與單擊相關圖例項具有相同的效果
• 按類別 header 對系列進行分組（在小提琴中為“水晶硅電池”）——單擊此 header 或其關聯的復選框可使整個系列組處於“活動”或“非活動”狀態

所有這些都在小提琴中工作 - https://jsfiddle.net/slaws/0wjpcaqt/138/ - 它使用 styledMode 和自定義圖例並動態設置圖表和自定義圖例元素的不透明度：

      $('.highcharts-legend-item.highcharts-series-' + value).css('opacity', new_opacity);
      $('.highcharts-series.highcharts-series-' + value).css('opacity', new_opacity);
      $('.highcharts-markers.highcharts-series-' + value).css('opacity', new_opacity);

然而，我正在為另一個關鍵要求而苦苦掙扎，即將圖表的當前 state 導出為圖像或 PDF，所有系列都以其當前的“活動”或“非活動”state 導出。因此，如果一個系列褪色, 它應該作為褪色導出到圖像或 PDF。

下面是截圖來說明：

• 這是多晶系列未激活的瀏覽器中的圖表顯示
• 這就是該圖表導出到 PNG的方式——我希望 Multichrystalline 系列導出時看起來像在瀏覽器中一樣，它的線條、標記和圖例項目褪色，使其看起來“不活動”

有什么建議可以導出當前有效樣式的圖表嗎？

PS 小提琴中的圖例可能開始時未對齊，但重新運行可以糾正該問題。

Answer 1

您不應使用 CSS 來實現它，而應進行一系列更新以將這些更改保留在圖表配置中。

events: {
    checkboxClick() {               
        this.update({
            opacity: 0.5
        })
    }
},

看看這個方法： https://jsfiddle.net/BlackLabel/b4n0z5k8/

API: https://api.highcharts.com/class-reference/Highcharts.Series#update