JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chartdiv"></div>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
CSS
#chartdiv {background: #3f3f4f;color:#ffffff;
width : 100%;
height : 500px;
font-size : 11px;
}
width : 100%;
height : 500px;
font-size : 11px;
}
JavaScript
var atividades = [{
"Codigo": 7,
"Descricao": "Atividade 1",
"CodigoMilestone": 6,
"TempoRevisado": 2,
"Inicio": "\/Date(1445738400000)\/",
"InicioCedo": "\/Date(1445738400000)\/",
"InicioTarde": "\/Date(-62135589600000)\/",
"TerminoCedo": "\/Date(1445911200000)\/",
"TerminoTarde": "\/Date(-62135589600000)\/",
"Ativo": true,
"Milestone": null,
"Dependencia": [],
"Dependencia1": []
}, {
"Codigo": 8,
"Descricao": "Ativade 2",
"CodigoMilestone": 6,
"TempoRevisado": 2,
"Inicio": "\/Date(1445997600000)\/",
"InicioCedo": "\/Date(1445997600000)\/",
"InicioTarde": "\/Date(1445911200000)\/",
"TerminoCedo": "\/Date(1446084000000)\/",
"TerminoTarde": "\/Date(1446084000000)\/",
"Ativo": true,
"Milestone": null,
"Dependencia": [],
"Dependencia1": []
}];
/**** Início do código ****/
/* Nomes dos milestones */
var milestones = {
"6":"Infraestrutura"
}
/* Atividades separadas por milestone */
var separacao = { };
function adicionarAtividade(atividade) {
if ( !separacao[atividade.CodigoMilestone] )
separacao[atividade.CodigoMilestone] = [];
separacao[atividade.CodigoMilestone].push(atividade);
}
atividades.forEach(adicionarAtividade);
/* Conversão de atividade para o formato esperado pelo dataProvider */
var cores = ["#7B042C","#7B742C","#7E585F"];
var qualCor = 0;
function converterAtividade(atividade) {
qualCor = (qualCor+1) % 3; // Alterna entre 3 cores diferentes
return {
InicioCedo: converterData(atividade.InicioCedo),
TempoRevisado: atividade.TempoRevisado,
color: cores[qualCor],
Descricao: atividade.Descricao
...