Wie zeigt man den Fortschrittsbalken im AmCharts-Gantt-Segment an?

Question

Ich möchte den Fortschritt eines Aufgabensegments (wie hier: http://www.officetooltips.com/excel/tips/gantt_chart_with_progress.html) mit dem grünen Balken innerhalb des Aufgabensegments auf AmCharts Gantt zeigen. Jetzt verwende ich Kugeln, wie hier gezeigt http://www.amcharts.com/tips/using-bullets-gantt-chart/, aber es ist ein bisschen kniffeliger Ansatz.

Außerdem habe ich versucht, benutzerdefinierte Klassennamen für graph-column-element mit addClassNames-Eigenschaft von AmChart und classNameField von AmGraph hinzuzufügen, aber es funktioniert nicht. Laut Gantt-Dokumentation gibt es kein benutzerdefiniertes Klassenpräfix für das Gantt-Tasksegment https://www.amcharts.com/tutorials/css-class-names/.

Answer 1

Ich kann nicht ganz bestimmen, was Sie anfordern. Vielleicht wird dieses Beispiel helfen.

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

Zuerst tut amCharts einig CSS-Steuerung für Gantt-Diagramme ermöglichen. Das Beispiel, auf das Sie in Ihrer Frage zeigen, ist ein älterer Post, und ich glaube, dass die API seitdem aktualisiert wurde. Sie sollten addClassNames verwenden können.

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

In Ihrem Diagramm Config ...

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

Verwenden Sie den DOM-Inspektor Ihres Browsers hinzugefügt, um die CSS-Klassennamen zu fangen.

Dies bedeutet, dass Sie dies in Ihrem CSS tun können:

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

Dann, wenn Sie Ihre Segmente ähnlich wie diese aufgebaut (sorry, ist diese Attrappe von einem amCharts Gantt Beispiel gegabelt Daten, die keine exakte Passform ich bin für Ihre Daten sicher) ...

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

... du so könnte am Ende ein Diagramm mit der Suche, die etwas mit dem Link zu passen scheint Ihnen geteilt.