![見出し画像](https://assets.st-note.com/production/uploads/images/71186482/rectangle_large_type_2_15060c96a5e1e8104b5a8a508b48585c.png?width=1200)
TWLogAIAN:検索条件の画面から戻るとグラフが消える問題で悩む
今朝は5時から開発開始です。昨日ログの検索ができるようなりました。かなり楽しくなってきたのでログの検索条件を細かく設定できる画面を作りはじめました。
![](https://assets.st-note.com/img/1643669261031-2GBzhAqZne.png?width=1200)
<条件>ボタンをクリックした時に表示する画面です。
とりあえず最大件数だけ設定できる画面
![](https://assets.st-note.com/img/1643669363258-mUj5hb6S9N.png?width=1200)
を作って操作感を試してみました。<適用>か<キャンセル>をクリックして元の画面に戻ると
![](https://assets.st-note.com/img/1643669472139-MdlQoqXerW.png?width=1200)
グラフが消えていました。グラフを再描画する必要がありますが、戻った瞬間に再描画してもだめでした。画面の他の部分が描画された後にグラフを再描画する必要があるようです。この問題の解決に1時間以上悩んで見つけた答えは
を使うことです。
const handleDone = (e) => {
page = "";
updateChart();
};
const updateChart = async () => {
await tick();
makeLogCountChart("chart");
updateLogCountChart(result.Logs);
};
のような処理で再描画できました。また一つSvelet+echartsの技を習得できました。
今朝は、ここで時間切れです。
明日に続く
いいなと思ったら応援しよう!
![twsnmp](https://assets.st-note.com/production/uploads/images/14333815/profile_ee1accba5615957e5029db85d57fdb0a.jpg?width=600&crop=1:1,smart)