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

Question

I'm trying to have an AMChart XY axis to show several processes in a single day. Everything seems to be working fine, but when i stack the data, my timeline zooms out until 1970..

So, with series.stacked = false it's working as it should.

Below is the code i'm using, hoping someone can spot the issue to make this run as intended.

The expected result is that all durations are stacked in a single line on the same day field (multiple ID's on the same day can occur)

Thanks all!

 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>

Answer 1

I had this problem as well, but couldn't find a proper solution. I have only figured out a workaround. You need to find the minimum and maximum times in chart.data and then you can use:

dateAxis.min = 1614556800000;
dateAxis.max = 1617235200000;

or [min | max]value.getTime()