実現したいこと
グラフのy軸がデバイスやタイミングによって描画・更新されたりされなかったりするのを解消したいです。（y軸として描画されていないだけで、対応するx軸の上にカーソルを載せると、y軸の値が表示されてはいます）
また原因を知りたいです。
同じコードでも、chart.jsの場合は上手く行きましたが、Apexchart.jsにしてから挙動が不安定になりました。
y軸の値は非同期処理の中で取得しているので、非同期処理が原因かと思い、asyncやthenを使ったりしましたが、解消されません。
困っています。どうか、よろしくお願いします。
こちらがそのフォルダになります。文字数制限のため、jsファイルの中身をここに記述できませんでした。こちらの、grapf.jsというファイルが該当jsファイルになります。
フォルダのリンク先
前提
開発環境はvscode、xamppです。dexie.jsに登録したデータを抽出してApexchart.jsを使いグラフを描画・更新するプログラムを作っています。
該当のソースコード
grapf.php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 8 <script src="js/apexcharts.min.js"></script> 9 <title>test</title> 10</head> 11<body> 12 13 <h1>グラフ</h1> 14 15 <!-- ボタン --> 16 <button id="month_button">一か月ごと</button> 17 <button id="week_button">一週間ごと</button> 18 <button id="prev_month_button">前の月</button> 19 <button id="next_month_button">次の月</button> 20 <button id="prev_week_button">前の週</button> 21 <button id="next_week_button">次の週</button> 22 23 <!-- ApexCharts.jsによるグラフ描画 --> 24 <div id="chart"></div> 25 26 <footer> 27 </footer> 28 29 <script src="node_modules/dexie/dist/dexie.js"></script> 30 <script src="js/graph.js" type="module"></script> 31 <!-- <script src="js/test2.js" type="module"></script> --> 32 </script> 33</body> 34</html>
試したこと
Apexchart.jsの最新バージョンのjsを読み込ませました。
asyncを使い、非同期処理が終了してからグラフの描画・更新を行うコードも書きましたが(上記のフォルダのtest2.jsというファイルです。文字数制限のため載せられませんでした。書き途中です)、
こちらもデバイスによってy軸が出なかったりします。
0 コメント