File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<!-- <div id="chartdiv" style="width: 100%" ref="chartdiv"></div> -->
<div style="width: 100%; height: inherit;" ref="chartdivWrap">
<div
ref="chartdiv"
id="chartdiv"
style="width: 100%; height: 100%; background: #ffffff"
></div>
</div>
</template>
<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
export default {
props: {
chartDataName: {
type: Array,
default: [],
},
chartData: {
type: Array,
default: [],
},
},
data() {
return {
charts: {},
};
},
methods: {
createChart: function () {
console.log("createChart");
/* if (COMMON_UTIL.isEmpty(this.charts["chartdiv"]) == false) {
this.charts["chartdiv"].dispose();
} */
let chartWarp = this.$refs["chartdivWrap"];
chartWarp.innerHTML = "";
let div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
chartWarp.appendChild(div);
let root = am5.Root.new(div);
this.charts["chartdiv"] = root;
/* Chart code */
//amChart 로고 삭제
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([am5themes_Animated.new(root)]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
let chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX"
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
let cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "zoomX"
}));
cursor.lineY.set("visible", false);
let date = new Date();
date.setHours(0, 0, 0, 0);
let value = 100;
function generateData() {
value = Math.round((Math.random() * 10 - 5) + value);
am5.time.add(date, "day", 1);
return {
date: date.getTime(),
value: value
};
}
function generateDatas(count) {
let data = [];
for (var i = 0; i < count; ++i) {
data.push(generateData());
}
return data;
}
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
maxDeviation: 0,
baseInterval: {
timeUnit: "day",
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 60
}),
tooltip: am5.Tooltip.new(root, {})
}));
let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
valueXField: "date",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}"
})
}));
series.columns.template.setAll({ strokeOpacity: 0 })
let data = generateDatas(50);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
},
},
watch: {
// 부모 컴포넌트에서 데이터 업데이트 시 자식 컴포넌트도 props 데이터 업데이트
// "chartData": function(newValue, oldValue){
// console.log('chartdiv watch: ', newValue, oldValue);
// // 차트 생성 함수
// this.createChart();
// }
},
mounted() {
this.createChart();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#chartdiv {
height: 50rem;
padding-top: 2rem;
}
</style>