微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

AMCharts 问题:我的 XY DateAxis 在堆叠时缩小到 1970

如何解决AMCharts 问题:我的 XY DateAxis 在堆叠时缩小到 1970

我正在尝试使用 AMChart XY 轴在一天内显示多个过程。一切似乎都运行良好,但是当我堆叠数据时,我的时间线缩小到 1970 年..

因此,使用 series.stacked = false 时,它可以正常工作。

以下是我正在使用的代码,希望有人能发现问题以使其按预期运行。

预期结果是所有 durations 都堆叠在同一 day 字段上的一行中(同一天可能出现多个 ID)

谢谢大家!

var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "dd/MM/yyyy HH:mm:ss";

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;

chart.data = [{
  "id":"1","name":"TEST","DURATION01":"6727.315","DURATION01_START":"29/04/2021 21:07:26","DURATION01_STOP":"29/04/2021 22:59:33","DURATION02":"4349.170","DURATION02_START":"29/04/2021 22:59:33","DURATION02_STOP":"30/04/2021 00:12:02","DURATION03":"13308.341","DURATION03_START":"30/04/2021 00:12:02","DURATION03_STOP":"30/04/2021 03:53:50","DURATION04":"1562.635","DURATION04_START":"30/04/2021 03:53:50","DURATION04_STOP":"30/04/2021 04:19:53","total_time":"25947.464","start":"Thu Apr 29 21:07:26 2021","end":"Fri Apr 30 04:31:22 2021","day":"29:04/2021 21:07:26","percent":100,"type":"task"
}];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.datafields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "dd/MM/yyyy HH:mm:ss";
dateAxis.renderer.minGriddistance = 70;
dateAxis.baseInterval = { count: 30,timeUnit: "minute" };

dateAxis.renderer.tooltipLocation = 0;
;

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
series1.datafields.openDateX = "DURATION01_START";
series1.datafields.dateX = "DURATION01_STOP";
series1.datafields.categoryY = "name";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke = "color";
series1.columns.template.strokeOpacity = 1;
series1.columns.template.height = am4core.percent(100);

/** WHEN STACKED = FALSE,IT WORKS **/
//series1.stacked = true

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
series2.datafields.openDateX = "DURATION02_START";
series2.datafields.dateX = "DURATION02_STOP";
series2.datafields.categoryY = "name";
series2.columns.template.propertyFields.fill = "color"; // get color from data
series2.columns.template.propertyFields.stroke = "color";
series2.columns.template.strokeOpacity = 1;
series2.columns.template.height = am4core.percent(100);

/** WHEN STACKED = FALSE,IT WORKS **/
//series2.stacked = true
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 300px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。