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 class="chart-wrap">
<div id="chartdiv" ref="chartdiv"></div>
</div>
</template>
<script>
import * as am5 from '@amcharts/amcharts5';
import * as am5hierarchy from '@amcharts/amcharts5/hierarchy';
import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
export default {
props: {
setData: {
type: Object,
default: {},
}
},
data() {
return {
};
},
methods: {
chartCreate: function (data) {
let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)
let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
div.style.width = "100%"; // 차트를 담을 div의 넓이
div.style.height = "100%"; // 차트를 담을 div의 높이
chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가
let root = am5.Root.new(div); // 차트 하위 div에 차트(root) 담기
this.charts = root; // 차트 정보 전역에 담기
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create wrapper container
let container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
let series = container.children.push(am5hierarchy.ForceDirected.new(root, {
singleBranchOnly: false,
downDepth: 1,
initialDepth: 2,
valueField: "average",
categoryField: "city",
childDataField: "children",
centerStrength: 0.5,
minRadius: 20,
maxRadius: am5.percent(15)
}));
// Generate and set data
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
let maxLevels = 2;
let maxNodes = 5;
let maxValue = 100;
// generateLevel(data, "", 0);
series.data.setAll([data]);
series.set("selectedDataItem", series.dataItems[0]);
// function generateLevel(data, name, level) {
// for (var i = 0; i < Math.ceil(maxNodes * Math.random()) + 1; i++) {
// let nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
// let child;
// if (level < maxLevels) {
// child = {
// name: nodeName + level
// }
// if (level > 0 && Math.random() < 0.5) {
// child.value = Math.round(Math.random() * maxValue);
// }
// else {
// child.children = [];
// generateLevel(child, nodeName + i, level + 1)
// }
// }
// else {
// child = {
// name: name + i,
// value: Math.round(Math.random() * maxValue)
// }
// }
// data.children.push(child);
// }
// level++;
// return data;
// }
// Make stuff animate on load
series.appear(1000, 100);
}
},
watch: {
'setData': function (newData) {
this.chartCreate(newData)
}
},
computed: {
},
components: {
},
mounted() {
}
}
</script>