单日里程碑甘特图

Question

我已经使用 Amcharts 3 实现了甘特图，效果很好，但就我而言，我还需要显示单个日期里程碑。它将里程碑显示为非常细的线，无法查看。我想显示一些其他对象（方形、菱形）作为单日里程碑而不是条形。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "gantt",
  "theme": "light",
  "marginRight": 70,
  "period": "DD",
  "dataDateFormat": "YYYY-MM-DD",
  "columnWidth": 0.5,
  "valueAxis": {
    "type": "date"   
  },
  "brightnessStep": 7,
  "graph": {
    "fillAlphas": 1,
    "lineAlpha": 1,
    "lineColor": "#fff",
    "fillAlphas": 0.85,
    "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
  },
  "rotate": true,
  "categoryField": "category",
  "segmentsField": "segments",
  "colorField": "color",
  "startDateField": "start",
  "endDateField": "end",
  "dataProvider": [ {
    "category": "Module #1",
    "segments": [ {
      "start": "2018-03-01",
      "end": "2018-03-01",
      "color": "#b9783f",
      "task": "Gathering requirements"
    }, {
      "start": "2018-06-27",
      "end": "2018-06-27",
      "task": "Producing specifications"
    }, {
      "start": "2018-07-18",
      "end": "2018-07-18",
      "task": "Development"
    }, {
      "start": "2018-07-20",
      "end": "2018-07-20",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #2",
    "segments": [ {
      "start": "2018-04-08",
      "end": "2018-04-08",
      "color": "#cc4748",
      "task": "Gathering requirements"
    }, {
      "start": "2018-07-15",
      "end": "2018-07-15",
      "task": "Producing specifications"
    }, {
      "start": "2018-08-16",
      "end": "2018-08-16",
      "task": "Development"
    }, {
      "start": "2018-09-10",
      "end": "2018-09-10",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #3",
    "segments": [ {
      "start": "2018-01-02",
      "end": "2018-01-02",
      "color": "#cd82ad",
      "task": "Gathering requirements"
    }, {
      "start": "2018-03-08",
      "end": "2018-03-08",
      "task": "Producing specifications"
    }, {
      "start": "2018-04-19",
      "end": "2018-04-19",
      "task": "Development"
    }, {
      "start": "2018-05-05",
      "end": "2018-05-05",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #4",
    "segments": [ {
      "start": "2018-04-01",
      "end": "2018-04-01",
      "color": "#2f4074",
      "task": "Gathering requirements"
    }, {
      "start": "2018-05-03",
      "end": "2018-05-03",
      "task": "Producing specifications"
    }, {
      "start": "2018-06-20",
      "end": "2018-06-20",
      "task": "Development"
    }, {
      "start": "2018-08-15",
      "end": "2018-08-15",
      "task": "Testing and QA"
    } ]
  }, {
    "category": "Module #5",
    "segments": [ {
      "start": "2018-01-12",
      "end": "2018-01-12",
      "color": "#448e4d",
      "task": "Gathering requirements"
    }, {
      "start": "2018-02-19",
      "end": "2018-02-19",
      "task": "Producing specifications"
    }, {
      "start": "2018-05-19",
      "end": "2018-05-19",
      "task": "Development"
    }, {
      "start": "2018-04-08",
      "end": "2018-04-08",
      "task": "Testing and QA"
    } ]
  } ],
  "valueScrollbar": {
    "autoGridCount": true
  },
  "chartCursor": {
    "cursorColor": "#55bb76",
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0,
    "valueLineAlpha": 0.5,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "zoomable": false,
    "valueZoomable": true
  },
  "export": {
    "enabled": true
  }
} );

如何覆盖这种情况？

Answer 1

您可以添加带有菱形或其他形状的项目符号，包括自定义图像。下面是一个使用钻石子弹的演示：

"graph": {
    ...
    "bulletField": "bullet",
    "bulletSize": 8
},

https://www.amcharts.com/docs/v3/tutorials/using-bullets-gantt-chart/ 另一种使线条更明显的方法是增加 border/stroke 属性

lineThickness:
"graph": {
    ...
    "lineThickness": 10,
You could also change the end dates to make the segments stretch over multiple days, but use a custom baloonFunction to show only the start day:
    "category": "Module #1",
    "segments": [ {
      "start": "2018-03-01",
      "end": "2018-03-03",
...

"graph": {
    "fillAlphas": 1,
    "lineAlpha": 1,
    "lineColor": "#fff",
    "fillAlphas": 0.85,
    //"balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]",
    "balloonFunction": function (graphDataItem, graph) {

      var item = graph.segmentData;

      return "Custom balloon: <b> <br >" + item.task +
        "</b><br />"  + item.start ;
    }
},

Answer 2

使用 Graphh 设置

"graph": {
    "bulletField": "bullet"
},

单日里程碑甘特图

Gantt chart for single day milestone

jquery

gantt-chart

amcharts