amcharts hierarchy实现可缩放的力导向树图表效果代码-html代码-BFW代码库

amcharts hierarchy实现可缩放的力导向树图表效果代码

代码语言：html

所属分类：图表

代码描述：amcharts hierarchy实现可缩放的力导向树图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 95vh;
}
</style>


  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts5.index.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts5.hierarchy.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts5.Animated.js"></script>

<div id="chartdiv"></div>
  
      <script >

var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)]);



// Set up zooming
// https://www.amcharts.com/docs/v5/concepts/common-elements/containers/#Zoomable_container
var zoomableContainer = root.container.children.push(
am5.ZoomableContainer.new(root, {
  width: am5.p100,
  height: am5.p100,
  pinchZoom: true }));



var zoomTools = zoomableContainer.children.push(am5.ZoomTools.new(root, {
  target: zoomableContainer }));



// Data
var data = {
  value: 0,
  children: [
  {
    name: "Flora",
    children: [
    {
      name: "Black Tea",
      value: 1 },

    {
      name: "Floral",
      children: [
      {
        name: "Chamomile",
        value: 1 },

      {
        name: "Rose",
        value: 1 },

      {
        name: "Jasmine",
        value: 1 }] }] },





  {
    name: "Fruity",
    children: [
    {
      name: "Berry",
      children: [
      {
        name: "Blackberry",
        value: 1 },

      {
        name: "Raspberry",
        value: 1 },

      {
        name: "Blueberry",
        value: 1 },

      {
        name: "Strawberry",
        value: 1 }] },



    {
      name: "Dried Fruit",
      children: [
      {
        name: "Raisin",
        value: 1 },

      {
        name: "Prune",
        value: 1 }] },



    {
      name: "Other Fruit",
      children: [
      {
        name: "Coconut",
        value: 1 },

      {
        name: "Cherry",
        value: 1 },

      {
        name: "Pomegranate",
        value: 1 },

      {
        name: "Pineapple",
        value: 1 },

      {
        name: "Grape",
        value: 1 },

      {
        name: "Apple",
        value: 1 },

      {
        name: "Peach",
        value: 1 },

      {
        name: "Pear",
        value: 1 }] },



    {
      name: "Citrus Fruit",
      children: [
      {
        name: "Grapefruit",
        value: 1 },

      {
        name: "Orange",
        value: 1 },

      {
        name: "Lemon",
        value: 1 },

      {
        name: "Lime",
        value: 1 }] }] },





  {
    name: "Sour/Fermented",
    children: [
    {
      name: "Sour",
      children: [
      {
        name: "Sour Aromatics",
        value: 1 },

      {
        name: "Acetic Acid",
        value: 1 },

      {
        name: "Butyric Acid",
        value: 1 },

      {
        name: "Isovaleric Acid",
        value: 1 },

      {
        name: "Citric Acid",
        value: 1 },

      {
        name: "Malic Acid",
        value: 1 }] },



    {
      name: "Alcohol/Fremented",
      children: [
      {
        name: "Winey",
        value: 1 },

      {
        name: "Whiskey",
        value: 1 },

      {
        name: "Fremented",
        value: 1 },

      {
        name: "Overripe",
        value: 1 }] }] },





  {
    name: "Green/Vegetative",
    children: [
    {
      name: "Olive Oil",
      value: 1 },

    {
      name: "Raw",
      value: 1 },

    {
      name: "Green/Vegetative",
      children: [
      {
        name: "Under-ripe",
        value: 1 },

      {
        name: "Peapod",
        value: 1 },

      {
        name: "Fresh",
        value: 1 },

      {
        name: "Dark Green",.........完整代码请登录后点击上方下载按钮下载查看