amcharts实现桑基图图表效果代码-html代码-BFW代码库

amcharts实现桑基图图表效果代码

代码语言：html

所属分类：图表

代码描述：amcharts实现桑基图图表效果代码

下面为部分代码预览，完整代码请点击下载或在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  >
<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.flow.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amcharts.Animated.js"></script>
<div id="chartdiv"></div>

      <script >
/**
 * ---------------------------------------
 * This demo was created using amCharts 5.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v5/
 * ---------------------------------------
 */

// 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)]);



// Create series
// https://www.amcharts.com/docs/v5/charts/flow-charts/
var series = root.container.children.push(am5flow.Sankey.new(root, {
  sourceIdField: "from",
  targetIdField: "to",
  valueField: "value",
  paddingRight: 50 }));


series.nodes.get("colors").set("step", 2);

series.nodes.labels.template.set("paddingLeft", 20);

series.nodes.nodes.template.setup = function (node) {
  var picture = node.children.push(am5.Picture.new(root, {
    widt.........完整代码请登录后点击上方下载按钮下载查看