私は突然、プロジェクト内のチャートがダウンロード (チャート データのエクスポート) 機能をサポートする必要があるという要件に遭遇しました (ファイルをダウンロードするためのインターフェイスを書くにはバックエンドが面倒です)。
グラフは写真に示されています:
現在、私のグラフは Vue プロジェクトの highchart で実装されています。highchart の公式の例を見てきましたが、ほとんどすべてにグラフのエクスポートとダウンロードの機能があります。
そこで、どの設定を直接追加すれば簡単にエクスポート機能が実現できるのではないかと考えました。
ということで、jsのチャート設定項目を見てみたところ、どれも共通の設定項目で特に何もないのですが、どうして私のチャートにはこのエクスポートボタンがないのでしょうか？
ということで、highchart公式サイトでAPIを直接検索したところ、意味をexportする構成項目exportingを見つけたので、
その中の例を確認したところ、exporting構成項目だけでなく、exportchartメソッドもあることがわかりました。エクスポートするカスタマイズ ボタンを実現できるハイチャート インスタンスの下。
というわけで、上記の書き方でカスタムエクスポートボタンとイベントを追加したのですが、コンソールでエラーが報告されましたコードは
図のとおりです:
コンソールは図のとおりです:
ハイチャートアイコンの例、実際に印刷しましたこのメソッドでは、インスタンス オブジェクトから始めたので、ローカルの印刷されたインスタンスと公式 Web サイトの例を比較しました。
My local: 
official website example: 
Then I私のローカル チャート インスタンスに exporting がないことに驚いたので、私のローカル インスタンスが不完全なハイチャート アイコン インスタンスであることは明らかです。
そこで、Baidu に行って、vue でのハイチャート チャートのエクスポート エラーを確認したところ、次の投稿が見つかりました。
https://blog.csdn.net/weixin_30815427/article/details/97301451は、highchart の導入に基づいており、 Vue での Highchartsの使用を考慮
して、さらに 2 つのファイル exporting.js と export-csv.js が導入されています。
公式サイト記事内で export-csv.js を導入している事例があるので、最初に export-csv.js を導入したのですが、exportchart メソッドを使用すると同じエラーが報告されました。メソッドを調べたところ、exportChart メソッドがないことがわかりました。中のコードをよく見てみると、export に似たメソッドが 2 つ見つかりましたが、exportChart という名前ではなかったので、この 2 つのメソッドを呼び出してみたところ、確かにチャートのデータをエクスポート (ダウンロード) できました。やはりデータファイルをダウンロードすることなのですが、欲しいチャート画像が実現していません。そこで再度 exporting.js ファイルをダウンロードし、export-csv.js の方法で参照したところ、exporting.js ファイルでエラーが発生しました。私は再び問題に遭遇しました、パニックにならないでください、目標は非常に明確です.exporting.js関連のインポートの欠如に過ぎません.ダウンロードしたexporting.jsを直接インポートするのは間違っているようです.クエリする Baidu: Vue ハイチャートのエクスポートを使用します。出てきた最初の記事で、質問に対する答えを見ました。
最初にインストールされたハイチャートは、以下のエクスポートに依存しています. 私はすぐにこのパスに従ってエクスポートを導入し、インポートされたエクスポートを使用してハイチャートを変更しました.
次に、カスタム ボタンのクリック イベントでインスタンスの exportChart メソッドを呼び出します。
それはかなりの成功であることが判明しました。
最後に、export-csv.js export xls または csv メソッドはインターネットに接続する必要がなく、フロント エンドで html メソッドを呼び出してダウンロードすることで直接生成できるため、両方のメソッドを記述することにしました。写真は https://export.highcharts .com/ の生成をリクエストする必要があります。ということで、ハイチャートサービスでの事故を避けるために、とりあえずxlsファイルのエクスポート機能はそのままにしておきましょう！
export-csv.js リソースのダウンロード アドレス