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",
  "end": "2019-04-30",
  "color": colorSet.getIndex(9),
  "task": "测试",
  "disabled2": false,
  "image2": "http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90",
  "location": 0 },
];


chart.dateFormatter.dateFormat = "yyyy-MM-dd";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
chart.fontSize = 11;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.paddingRight = 25;
categoryAxis.renderer.minGridDistance = 10;
categoryAxis.renderer.innerRadius = -60;
categoryAxis.renderer.radius = 60;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "day" };
dateAxis.renderer.tooltipLocation = 0;
dateAxis.startLocation = -0.5;
dateAxis.renderer.line.strokeDasharray = "1,4";
dateAxis.renderer.line.strokeOpacity = 0.6;
dateAxis.tooltip.background.fillOpacity = 0.2;
dateAxis.tooltip.background.cornerRadius = 5;
dateAxi.........完整代码请登录后点击上方下载按钮下载查看