AMCharts 問題：我的 XY DateAxis 在堆疊時縮小到 1970

Question

我正在嘗試使用 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>

Answer 1

我也有這個問題，但找不到合適的解決方案。 我只是想出了一個解決方法。 您需要在chart.data中找到最小和最大時間，然后您可以使用：

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

或 [分鍾 | max]value.getTime()