如何在 AmCharts 甘特图段上显示进度条？

Question

我想显示一个任务段的进度（像这里：http://www.officetooltips.com/excel/tips/gantt_chart_with_progress.html) using green bar inside task segment on AmCharts Gantt. Now I am using bullets as shown here http://www.amcharts.com/tips/using-bullets-gantt-chart/，但这是一个有点棘手的方法。

此外，我尝试使用 AmChart 的 addClassNames 属性和 AmGraph 的 classNameField 为图形列元素添加自定义 class 名称，但它不起作用.甘特图文档说甘特图任务段 https://www.amcharts.com/tutorials/css-class-names/.

没有自定义 class 前缀

Answer 1

我无法完全确定您的要求。也许这个例子会有所帮助。

http://jsfiddle.net/13jbrn2e/1/

首先，amCharts 允许对甘特图进行一些 css 控制。您在问题中指出的示例是较旧的 post，我相信 api 已更新。您应该可以使用 addClassNames.

https://docs.amcharts.com/3/javascriptcharts/AmGanttChart#addClassNames

在您的图表配置中...

var chart = AmCharts.makeChart( "chartdiv", {
    "type": "gantt",
    "theme": "light",
    "marginRight": 70,
    "addClassNames": true,

使用浏览器的 DOM 检查器捕捉添加的 css class 名称。

这意味着您可以在 css:

中执行此操作

.amcharts-graph-column-element {
  stroke-width: 1;
  stroke: green;
}

然后，如果您设置与此类似的细分（抱歉，这是从 amCharts 甘特图示例派生出来的虚拟数据，我确信它不适合您的数据）...

}, {
    "category": "Smith",
    "segments": [ {
        "start": 10,
        "duration": 8,
        "color": "#29a329",
        "task": "Task #2"
    }, {
        "duration": 1,
        "color": "#ebfaeb",
        "task": "Task #2"
    } ]
}, {

...您最终可能会得到这样的图表，它似乎与您分享的 link 有点吻合。

如何在 AmCharts 甘特图段上显示进度条？

How to show progress bar on AmCharts gantt segment?

amcharts

gantt-chart