amcharts4中日期轴的最小值和最大值

Question

我有一个带有日期轴的折线图，数据以一天 30 或 15 分钟的间隔显示。由于数据是动态的，在某些情况下，数据在中午 12 点左右或其他时间开始，因此 x 轴并不总是从 00:00 开始。同样，数据可能会在午夜 12:00 之前结束。

我想始终显示 dateAxis 从 00:00 开始，然后进行一些修复步骤，让我们说每隔一两个小时一个标签，并在午夜 12:00 结束。我该怎么做？

我试过 DateAxis.min 和 DateAxis.max。但这些只接受数值。不知道如何将其设置为适当的数值来表示一天的开始和结束。

我也尝试设置 DateAxis.extraMin 和 DateAxis.extraMax，但它们正在处理百分比，但很难为动态数据找到合适的值。

This is how current graph renders

This is how i want to display (notice the empty labels at the start)

Answer 1

DateAxis 对象中的最小/最大属性采用毫秒时间戳。您可以使用 JavaScript Date 对象中getTime() 的结果：

dateAxis.min = (new Date(2019,7,10)).getTime();
dateAxis.max = (new Date(2019,7,10,23)).getTime();

不过，没有办法明确设置步骤。您可以调整minGridDistance 以影响该步骤，仅此而已。您可以使用的唯一解决方法是在每个时间戳插入指南 (Axis Ranges)，并使用适当的标签并禁用 DateAxis 的默认标签。

    range.date = new Date(2019, 7, 10, 0);
    range.grid.strokeOpacity = .5;
    range.grid.stroke = "#cecece";
    range.label.text = "00:00";

请注意，在这种情况下，轴不会调整标签可见性，因此您可能还需要在范围标签上设置旋转。

下面的演示：

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = generateData();

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.name = "Sales";
series.strokeWidth = 3;
series.fillOpacity = 0.5;


dateAxis.baseInterval = {
  timeUnit: "minute",
  count: 15
}
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.labels.template.disabled = true;
dateAxis.min = (new Date(2019, 7, 10, 0)).getTime();
dateAxis.max = (new Date(2019, 7, 10, 23)).getTime();

generateRanges(dateAxis);

function generateRanges(axis) {
  var firstDate = new Date(2019, 7, 10, 0);
  for (var i = 0; i < 24; ++i) {
    var range = axis.axisRanges.create();
    var nextDate = new Date(firstDate);
    nextDate.setHours(i);
    range.date = nextDate;
    range.grid.strokeOpacity = .5;
    range.grid.stroke = "#cecece";
    range.label.text = ("0" + nextDate.getHours()).substr(-2) + ":" + ("0" + nextDate.getMinutes()).substr(-2);
    range.label.rotation = 90;
  }
}

function generateData() {
  var data = [];
  var firstDate = new Date(2019, 7, 10, 10);
  for (var i = 0; i < 32; ++i) {
    var nextDate = new Date(firstDate);
    nextDate.setMinutes(i * 15);
    data.push({
      date: nextDate,
      value: Math.floor(Math.random() * 15 + 5)
    })
  }
  return data;
}

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 98vh;"></div>