apexcharts.js グラフの更新がうまくいかない

実現したいこと

ボタンをクリックしたらグラフを再描画させたいです。

前提

apexcharts.jsを使ってグラフを作っています。
ReactやVue.jsは使わずバニラjsで書いています。

ボタンをクリックしたら、グラフの縦の数字も横のラベルも変えたいのですが、
ボタンをクリックすると縦の数字は変わりますが、横のラベルが変わりません。

再描画のためにクリックイベントにて、オブジェクトへの再代入を行っていますが、 options.series[0].data = test2;は反映されていますが
下記の二つが反映されていないようです。
options.xaxis.categories=test1;
options.xaxis.type=test1;

エラーはありません。分からなくて困っているので助けてください。

ボタンクリック前

ボタンクリック後（横のラベルが24....51から変化していない）

該当のソースコード

test.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
9  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"
10  integrity="sha512-VMsZqo0ar06BMtg0tPsdgRADvl0kDHpTbugCBBrL55KmucH6hP9zWdLIWY//OTfMnzz6xWQRxQqsUFefwHuHyg=="
11  crossorigin="anonymous"></script>
12  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
13  <script src="https://unpkg.com/apexcharts/dist/apexcharts.min.js"></script>
14  <title>facescale_app</title>
15</head>
16<body>
17
18  <p>グラフ表示</p>
19  
20  <!-- ボタン -->
21  <button id="button">ボタン</button>
22 
23  <!-- グラフ描画 -->
24
25  <div id="chart"></div>
26 
27  <script src="test.js"></script>
28 
29</body>
30</html>

test.js
1
2let sample1=[3,6,8,7,6,90,80];
3 let sample2=[7,5,3,9,2.8];
4let sample=[24,72,51,90];
5
6const button = document.getElementById('button');
7
8var options = {
9    chart: {
10        height: 350,
11        width: 700,
12        type: 'line',
13        zoom: {
14            enabled: false
15        }
16    },
17    stroke: {
18        curve: 'straight',
19        // dashArray: 5,
20        width: 5
21    },
22    markers: {
23        size: 8,
24        colors: ["#ffffff"],
25        strokeColor: "#008FFB",
26        strokeWidth: 3
27    },
28    series: [{
29        name: 'スコア',
30        data: sample
31    }],
32    grid: {
33        row: {
34            colors: ['#f3f3f3', 'transparent'], 
35            opacity: 0.5
36        },
37    },
38    xaxis: {
39        type: sample,
40        categories: sample,
41        tickAmount: 1
42    },
43    yaxis: {
44        min: 0,
45        max: 100
46    },
47    fill: {
48        type: 'gradient',
49        gradient : {
50            shade: 'dark',
51            gradientToColors: ['#F9A3A4'],
52            shadeIntensity: 1,
53            type: 'vertical',
54            opacityFrom: 1,
55            opacityTo: 1,
56            stops: [0, 100]
57        }
58    }
59}
60
61var chart = new ApexCharts(document.querySelector("#chart"), options);
62chart.render();
63
64button.addEventListener("click", () => {
65    
66    // グラフ更新
67    console.log(options.xaxis.categories);
68    
69    options.xaxis.categories=test1;
70    options.xaxis.type=test1;
71     options.series[0].data = test2;
72    
73
74    chart.update();
75    console.log(options.xaxis.categories);
76    console.log(options.series[0].data);
77    console.log(options.xaxis.type);
78});

試したこと

https://suke.io/entry/20180801/
上記のサイトによると、グラフを再描画するにはオブジェクトに再代入するとあったので、
options.xaxis.categories=test1;
options.xaxis.type=test1;
options.series[0].data = test2;
のように再代入しましたが、
options.xaxis.categories=test1;
options.xaxis.type=test1;の部分が反映されません。

公式サイトhttps://apexcharts.com/docs/methods/では
chart.render();で再描画されるとありましたがクリックイベントの中にchart.render();を書くとグラフの数が増えたり減ったりして思った鳥の挙動にならないため、
試しにchart.jsのchart.update()；メソッドを書いたところなぜか一部だけ（縦軸の変数）更新されました。

補足情報（FW/ツールのバージョンなど）

vscode,xampp

Lhankor_Mhy

2024/04/17 08:03

ご提示のページには、 >>> そこでcomponentDidUpdate内でApexChartsのインスタンスが保持しているデータセットを更新して再描画する。アップデートに使えるメソッドは以下の通り updateOptions (newOptions, redrawPaths, animate) updateSeries (newSeries, animate) どちらも第一引数で受け取ったプロパティで既存のデータセットをオーバーライドする。 <<< と書いてありました。『オブジェクトに再代入する』とは書いてなさそうです。

Lhankor_Mhy

2024/04/17 08:24

> chart.render();で再描画されるとありました見つけることができませんでした。当該部分がどこか教えていただけますか？

loving

2024/04/17 12:27

コメントありがとうございます。chart.updateOptions({ xaxis: { categories:test1 } }) chart.updateSeries([ { name: 'sales', data: test2 }, ]) を試したところ問題が解決しました！ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

loving

2024/04/17 12:30

>> chart.render();で再描画されるとありました >見つけることができませんでした。当該部分がどこか教えていただけますか？ The render() method is responsible for drawing the chart on the page. It is the primary method that has to be called after configuring the options. 日本語訳： render() メソッドは、ページ上にグラフを描画します。これは、オプションを構成した後に呼び出す必要がある主要なメソッドです。再描画とは書かれてませんでした。すみません。

Lhankor_Mhy

2024/04/18 00:50

ご解決されて何よりです。お手数をおかけしますが、自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself