amcharts实现甘蔗图交互效果-html代码-BFW代码库

amcharts实现甘蔗图交互效果

代码语言：html

所属分类：图表

代码描述：amcharts实现甘蔗图交互效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
#chartdiv {
	width		: 1080px;
	height		: 400px;
	font-size	: 10px;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-gantt.js"></script>
<div id="chartdiv"></div>

<script>
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
  "type": "gantt",
  "theme": "light",
  "marginRight": 40,
  "period": "hh",
  "dataDateFormat": "YYYY-MM-DD",
  "balloonDateFormat": "JJ:NN",
  "columnWidth": 0.25,
  "valueAxis": {
    "type": "date",
    "minimum": 7,
    "maximum": 31,
    "fontSize": 10,
    "titleFontSize": 18 },

  "balloon": {
    "adjustBorderColor": true,
    "borderThickness": 2,
    "shadowAlpha": 0,
    "color": "#353535",
    "cornerRadius": 3,
    "fillColor": "#FFFFFF" },

  "categoryAxis": {
    "fontSize": 10,
    "fillColor": "#ededed" },

  "brightnessStep": 10,
  "graph": {
    "fillAlphas": 1,
    "balloonText": "<b>[[task]]</b><br/>开始：[[open]]<br/>期限：[[value]]" },

  "rotate": true,
  "categoryField": "category",
  "segmentsField": "segments",
  "colorField": "color",
  "startDate": "2020-01-01",
  "startField": "start",
  "endField": "end",
  "durationField": "duration",
  "dataProvider": [{
    "category": "系统开发",
    "segments": [{
      "start": 7,
      "duration": 2,
      "color": "#55c4f5",
      "task": "#1" },
    {
      "duration": 2,
      "color": "#fed230",
      "task": "#2" },
    {
      "duration": 2,
      "color": "#259e39",
      "task": "#3" }] },

  {
    "categor.........完整代码请登录后点击上方下载按钮下载查看