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

【问题标题】：AMCharts issue: My XY DateAxis zooms out to 1970 when stackedAMCharts 问题：堆叠时我的 XY DateAxis 缩小到 1970
【发布时间】：2021-05-08 13:17:00
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： javascript express amcharts

【解决方案1】：

我也遇到过这个问题，但找不到合适的解决方案。我只是想出了一个解决方法。您需要在 chart.data 中找到最小和最大时间，然后您可以使用：

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

或 [分钟 |最大值]value.getTime()

【讨论】：