代码语言：html

所属分类：图表

代码描述：amcharts实现力导向网络 Force Directed Tree 图表效果代码，用于将多项目数据以分层、线性或混合的方式显示为一系列链接的气泡。

代码标签： amcharts 力导向 网络 Force Directed Tree 图表

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

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 550px;
}
</style>

<!-- Resources -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.index.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.hierarchy.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.Animated.js"></script>

<!-- Chart code -->
<script>
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)
]);

var data = {
  name: "Root",
  value: 0,
  children: [
    {
      name: "1",
      linkWith: ["2"],
      children: [
        {
          name: "A",
          children: [
            { name: "A1", value: 1 },
            { name: "A2", value: 1 },
            { name: "A3", value: 1 },
            { name: "A4", value: 1 },
            { name: "A5", value: 1 }
          ]
        },
        {
          name: "B",
          children: [
            { name: "B1", value: 1 },
            { name: "B2", value: 1 },
            { name: "B3", value: 1 },
            { name: "B4", value: 1 },
            { name: "B5", value: 1 }
          ]
        },
        {
          name: "C",
          children: [
            { name: "C1", value: 1 },
            { name: "C2", value: 1 },
            { name: "C3", value: 1 },
            { name: "C4", value: 1 },
            { name: "C5", value: 1 }
          ]
        }
      ]
    },

    {
      name: "2",
      linkWith: ["3"],
      children: [
        {
          name: "D", value:1
        },
        {
          name: "E&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论