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 对象中的 min/max 属性采用毫秒时间戳。您可以使用 JavaScript 日期对象中 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>

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

min and max value for date axis in amcharts4

charts

amcharts

amcharts4