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

【问题标题】：How to show progress bar on AmCharts gantt segment?如何在 AmCharts 甘特图上显示进度条？
【发布时间】：2016-07-27 13:35:40
【问题描述】：

我想在 AmCharts Gantt 上使用任务段内的绿色条显示任务段的进度（如此处：http://www.officetooltips.com/excel/tips/gantt_chart_with_progress.html）。现在我正在使用这里显示的项目符号http://www.amcharts.com/tips/using-bullets-gantt-chart/，但这是一个有点棘手的方法。

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

【问题讨论】：

标签： amcharts gantt-chart

【解决方案1】：

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

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

首先，amCharts 确实允许对甘特图进行一些 css 控制。您在问题中指出的示例是较旧的帖子，我相信该 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 类名。

这意味着您可以在您的 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"
    } ]
}, {

...您最终可能会得到一个看起来像这样的图表，这似乎与您共享的链接有些匹配。

【讨论】：

看来我无法为具体任务段添加自定义 css 类。而使用两个或更多段是显示任务进度的唯一方法。