1

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

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

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

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

環境:vue3,vuetify,amcharts5

コード

<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>

生成されるページ
画像の説明をここに入力

例えばこのページでボタン1を押すと下記のようなグラフが生成されます
画像の説明をここに入力

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

画像の説明をここに入力

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

画像の説明をここに入力

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

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

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。