そもそも、まず「使えるかどうか知りたかった」んですがggっても出てこなかったのでメモです。
vue3でamChart4、使えました。(少なくとも表示はできました。)
公式を元に
https://www.amcharts.com/docs/v4/getting-started/integrations/using-vue-js/
beforeDestroy
をbeforeUnmount
に変更したら表示までは少なくともいけました。
<template>
<div class="hello" ref="chartdiv">
</div>
</template>
<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
export default {
name: 'HelloWorld',
mounted() {
let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);
chart.paddingRight = 20;
let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
}
chart.data = data;
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY.value}";
chart.cursor = new am4charts.XYCursor();
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
this.chart = chart;
},
// ここが公式ではbeforeDestroy
beforeUnmount() {
if (this.chart) {
this.chart.dispose();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
width: 100%;
height: 500px;
}
</style>
使えそうです。よかった。
追記:
amCharts4の月を数字にしたい&日本語化(vue3)
https://qiita.com/AyakoKataoka/items/31382d7c283d753afd39