emachart实现曲线时间任务表效果-html代码-BFW代码库

emachart实现曲线时间任务表效果

代码语言：html

所属分类：图表

代码描述：emachart4根据每个人的时间任务不同，采用不同的颜色与图片来标识，还可拖动时间节点来查看更详情的信息。

下面为部分代码预览，完整代码请点击下载或在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: 600px;
}

.demo-theme-dark .demo-background {
  background: #000;
}
</style>

</head>
<body translate="no">

<script src="http://repo.bfw.wiki/bfwrepo/js/amchart/core.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/amchart/charts.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/amchart/timeline.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/amchart/bullets.js"></script>
<script src="http://repo.bfw.wiki/bfwrepo/js/amchart/animated.js"></script>
<div id="chartdiv"></div>

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

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_timeline.SerpentineChart);
chart.curveContainer.padding(50, 20, 50, 20);
chart.levelCount = 4;
chart.yAxisRadius = am4core.percent(25);
chart.yAxisInnerRadius = am4core.percent(-25);
chart.maskBullets = false;

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.5;

chart.data = [{
  "category": "小李的时间任务表",
  "start": "2019-01-10",
  "end": "2019-03-13",
  "color": colorSet.getIndex(0),
  "task": "前端开发完成100个页面" },
{
  "category": "小王的时间任务表",
  "start": "2019-02-05",
  "end": "2019-04-18",
  "color": colorSet.getIndex(0),
  "task": "完后后端100个接口开发" },
{
  "category": "小宋的时间任务表",
  "start": "2019-01-08",
  "end": "2019-03-10",
  "color": colorSet.getIndex(5),
  "task": "前端UI设计100个" },

{
  "category": "小刚的时间任务表",
  "start": "2019-02-20",
  &qu.........完整代码请登录后点击上方下载按钮下载查看