142 lines
2.9 KiB
Vue
142 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div class="detail-page__panel panels">
|
||
|
|
<div id="chartdiv">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#chartdiv {
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- <script src="https://cdn.amcharts.com/lib/5/index.js"></script> -->
|
||
|
|
<!-- <script src="https://cdn.amcharts.com/lib/5/hierarchy.js"></script> -->
|
||
|
|
<!-- <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script> -->
|
||
|
|
<!-- <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script> -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import "assets/common/js/chart/index.js";
|
||
|
|
// import "assets/common/js/chart/hierarchy.js";
|
||
|
|
// import "assets/common/js/chart/Animated.js";
|
||
|
|
|
||
|
|
am5.ready(function() {
|
||
|
|
|
||
|
|
// Create root element
|
||
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||
|
|
var root = am5.Root.new("chartdiv");
|
||
|
|
|
||
|
|
|
||
|
|
// Set themes
|
||
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
||
|
|
root.setThemes([
|
||
|
|
am5themes_Animated.new(root),
|
||
|
|
am5themes_Responsive.new(root)
|
||
|
|
]);
|
||
|
|
|
||
|
|
|
||
|
|
// Create wrapper container
|
||
|
|
var container = root.container.children.push(am5.Container.new(root, {
|
||
|
|
width: am5.percent(50),
|
||
|
|
height: am5.percent(20),
|
||
|
|
layout: root.verticalLayout
|
||
|
|
}));
|
||
|
|
|
||
|
|
|
||
|
|
// Create series
|
||
|
|
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
|
||
|
|
var series = container.children.push(am5hierarchy.Tree.new(root, {
|
||
|
|
singleBranchOnly: false,
|
||
|
|
downDepth: 1,
|
||
|
|
initialDepth: 2,
|
||
|
|
valueField: "value",
|
||
|
|
categoryField: "name",
|
||
|
|
childDataField: "children"
|
||
|
|
}));
|
||
|
|
|
||
|
|
|
||
|
|
// Generate and set data
|
||
|
|
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
|
||
|
|
// var maxLevels = 3;
|
||
|
|
// var maxNodes = 3;
|
||
|
|
// var maxValue = 100;
|
||
|
|
|
||
|
|
var data = {
|
||
|
|
name: "جامعه",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
name: "فرهنگ",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
name: "خدمات",
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "صننعت",
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "کشاورزی",
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "سیاست",
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "اقتصاد",
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
//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++) {
|
||
|
|
// var nodeName = name + "ABCDEFGHIJKLMNOPQRSTUVWXYZ"[i];
|
||
|
|
// var 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);
|
||
|
|
|
||
|
|
}); // end am5.ready()
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "charttreeOld",
|
||
|
|
};
|
||
|
|
</script>
|