問題タブ [apexcharts]

Apexchartsを使用して vue.js サイトのグラフを作成しようとしていますが、グラフがまったく表示されません。

-Apexcharts のドキュメントはこちら

HTML

JavaScript

CSS

「var option = ...」を「option:...」に変更してvue.jsグローバル変数を使用しようとしましたが、エラーが発生するだけでした。

「#chart」IDを使用してdivに表示することを想定していると確信しています

どんな助けやアドバイスも大歓迎です、ありがとう。

Y値の後にApexchartsツールチップに%を追加しようとしています。どのapexchartが公式ドキュメントを提供していないかを使用しています。しかし、私はそれが適切に機能するようになりました。これが私がこれまでに持っているものです：vue.js

フォーマッタを使用して結果をこのように変更しようとしましたが、うまくいかないようです。

助けや参考文献は大歓迎です、ありがとう。

また、スタックでは頂点チャートの新しいタグを投稿できませんので、公式ドキュメントをご覧ください。アペックスチャート

javascript ライブラリを使用しようとしてapexChartsいますが、クリック イベントの実装に問題があります。ドキュメントを読みましたが、実装方法に関する明確な例はありません。

これまでのところ、私はこのコードを持っています。

最初にイベントを試しclickましたが、探しているのはdataPointSelection、ユーザーが縦棒/横棒グラフをクリックしたときに要素のイベントまたはデータを返すメソッドであることがわかりました。これを実装する方法はありますか? どんな提案も素晴らしいでしょう！

HTML に次のコードがあります (Vue JS & Bootstrap でコード化):

カードには 4 つのタブがあり、そのうちの 1 つは「Sales」というタイトルで<sales-analytics></sales-analytics>、Vue-ApexCharts ライブラリを使用してグラフをレンダリングするために作成したコンポーネントです。ただし、タブが選択されている場合、グラフは自動的にレンダリングされません。ChromeでF12をクリックした後にのみ実行でき、ページのリロードも機能しません。

コンポーネントは、サイトが読み込まれたときに完全に実行されるのではなく、タブが選択された後にのみ実行されるべきだと考えています (これは、サイトの読み込み時にタブが選択されていないとレンダリングの問題が発生するためです)。これを実装する方法を知っている人はいますか？または、この問題を解決する別の方法はありますか?

スクリプト セクションのその他の内容:

編集: かなりのグーグルの後、私はこれを見つけました: https://github.com/apertureless/vue-chartjs/issues/157 これは私の状況と非常によく似た動作をしています。タブが選択された後のコンポーネント。誰でもそれを行う方法を知っていますか?