簡略化して再描画問題を克服

データ	数値
個数
平均
分散
標準偏差σ
中央値

再描画フリーズ問題、chatGPTに協力してもらい解決しました。

Plotlyの仕様によるもののようです。

以下、chatGPTの解説と日本語訳記します

I see the issue. It looks like Plotly is trying to create the chart inside the “myDiv” element, but the default behavior of the form inside the HTML is causing the page to refresh when the button is clicked, which clears the content of the “myDiv” element.

To prevent the default form submission behavior, you need to modify the redrawChart function to accept an event parameter and call event.preventDefault() at the beginning. Here’s the modified function:
chatGPT

function redrawChart(event) {
  // Prevent the default form submission behavior
  event.preventDefault();

Additionally, you need to modify your HTML form tag to include onsubmit attribute like this:
chatGPT

<form class="box2" onsubmit="redrawChart(event)">

This way, when the form is submitted, it will call redrawChart with the event parameter and prevent the default form submission behavior.
chatGPT

問題はわかりました。 Plotly は「myDiv」要素内にグラフを作成しようとしているように見えますが、HTML 内のフォームのデフォルトの動作により、ボタンをクリックするとページが更新され、「myDiv」要素のコンテンツがクリアされます。

デフォルトのフォーム送信動作を防ぐには、redrawChart 関数を変更してイベントパラメーターを受け入れ、最初にevent.preventDefault() を呼び出す必要があります。変更された関数は次のとおりです。

さらに、HTML フォームタグを変更して、次のように onsubmit 属性を含める必要があります。