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を複数もてないようなのでここを一工夫できないか考え中です。
もし知っている方がいれば教えて頂けるとありがたいです、よろしくお願いいたします。