如何在AmCharts甘特圖上顯示進度條？

Question

我想使用AmCharts甘特圖任務段內的綠色條顯示任務段的進度（如此處：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" 
    } ] 
}, { 

...你可能最終有圖看這個樣子，這似乎與你分享的鏈接有點相匹配。