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

Question

我想使用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为graph-column-element添加自定义类名，但它不起作用。甘特文档说明甘特图任务段https://www.amcharts.com/tutorials/css-class-names/没有自定义类前缀。

Answer 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"
    } ]
}, {

...你最终可能会看到这样的图表，这似乎与你分享的链接有些匹配。