

vue3とamcharts5を不慣れなため思ったような挙動をしてくれなくて困っています。

やりたいことは、グラフをボタンで切り替えたいです。

具体手には、ボタンを二つ設置して、データ1がクリックされたら円グラフを描画、その後もう一つのデータ2をクリックしたら同じグラフを使用してデータだけ入れ替えて、再描画したいと考えていて、

コードを書きましたがエラーが出て動きません、もし詳しい方が入れば教えて頂きたいです。

環境:vue3,vuetify,amcharts5

**コード**

[code]

    <script setup lang='ts'>
    import {onMounted,ref,Ref,onUpdated,onBeforeUnmount} from "vue"
    import * as am5 from '@amcharts/amcharts5';
    import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";
    import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
    import * as am5percent from "@amcharts/amcharts5/percent";
    
    const onClick=(inportNumber:number)=>{
      
    var root = am5.Root.new("chartdiv");
    root.setThemes([
      am5themes_Animated.new(root)
    ]);
    
    var chart = root.container.children.push( 
      am5percent.PieChart.new(root, {
        layout: root.verticalLayout
      }) 
    );
    
    // Define data
    if(inportNumber==0){
    var data = [{
      country: "France",
      sales: 100000
    }, {
      country: "Spain",
      sales: 160000
    }, {
      country: "United Kingdom",
      sales: 80000
    }];
    }
    if(inportNumber==1){
        var data = [{
      country: "France",
      sales: 50
    }, {
      country: "Spain",
      sales: 50
    }];
    }
    
    
    // Create series
    var series = chart.series.push(
      am5percent.PieSeries.new(root, {
        name: "Series",
        valueField: "sales",
        categoryField: "country"
      })
    );
    series.data.setAll(data);
    
    // Add legend
    var legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.percent(50),
      x: am5.percent(50),
        layout: root.horizontalLayout
    }));
    
    legend.data.setAll(series.dataItems);
      
    }
    </script>
    <template>
    <div>
    <v-btn @click="onClick(0)">データ1</v-btn>
    <v-btn @click="onClick(1)">データ2</v-btn>
    
    </div>
      <div id="chartdiv">
      </div>
    </template>
    
    <style scoped>
    #chartdiv{
      width: 70%;
      height: 300px;
      margin-top: 100px;
    }
    </style>
    
[/code]

生成されるページ  
[![画像の説明をここに入力](https://i.stack.imgur.com/llPrC.png)](https://i.stack.imgur.com/llPrC.png)

例えばこのページでボタン1を押すと下記のようなグラフが生成されます  
[![画像の説明をここに入力](https://i.stack.imgur.com/alZvk.png)](https://i.stack.imgur.com/alZvk.png)

次にボタン2を押すとデータだけ入れ替えて違う円グラフを作りたいのですが、クリックしても下の円グラフまま変化がありません

[![画像の説明をここに入力](https://i.stack.imgur.com/eeCzB.png)](https://i.stack.imgur.com/eeCzB.png)

エラー内容を確認してみると下記のようになってます

[![画像の説明をここに入力](https://i.stack.imgur.com/UVcB8.png)](https://i.stack.imgur.com/UVcB8.png)

rootを複数もてないようなのでここを一工夫できないか考え中です。

もし知っている方がいれば教えて頂けるとありがたいです、よろしくお願いいたします。


CC BY-SA 4.0
2023-02-23T09:04:28.903
93959
2023-02-26T13:30:00.500
2023-02-26T13:30:00.500
57233
57233
question
javascript typescript vue.js vuex
vue3を使用してamcharts5のグラフを切り替えたいです