amcharts4 格式化来自 unix 时间戳的日期

Question

我有一个简单的面积图，我想用小时和分钟显示正确的日期。我有一个用于转换 unix 时间戳的常量：

const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    }
    if (month < 10) {
      month = '0' + month;
    }
    const formattedDate = day + '/' + month + '/' + year;
    return formattedDate;
}

这是我的完整代码：

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/8se3o";

const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    }
    if (month < 10) {
      month = '0' + month;
    }
    const formattedDate = day + '/' + month + '/' + year;
    return formattedDate;
}

chart.data = chart.data.map(element => {
  element.time = formatDate(element.time)
  return element;
});




var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "outDiff";
series.dataFields.valueY = "outDiff";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "inDiff";
series2.dataFields.dateX = "time";
series2.dataFields.valueY = "inDiff";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();


chart.legend = new am4charts.Legend();
chart.legend.position = "top";

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: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

时间键中的所有数据均来自今天 (19/04/2019)

Answer 1

您的代码有几处错误。

首先，amCharts 期望日期按 ascending order 排序。您的数据目前乱序，导致图表看起来很奇怪。

其次，您不需要将数据格式化为字符串格式。您仍然可以使用您的时间戳（前提是您乘以 1000 秒）并使用图表的 dateFormatter 通过 inputDateFormatter 中的 "x" 代码解析它，如记录 here。

由于您使用的是 dataSource，因此您可以使用 parseended 事件来 manipulate your data before it is assigned to the chart，如下所示：

chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  var data = ev.target.data;
  data.sort(function(lhs, rhs) {
    return lhs.time - rhs.time;
  });
  data.forEach(function(item) {
    item.time *= 1000;
  });
});

chart.dateFormatter.inputDateFormat = "x";

要更改日期，您必须修改日期轴的 dateFormats 和 periodChangeDateFormats 列表对象，并为要重新格式化的时间段设置适当的日期格式。由于您的数据以分钟为单位，因此您需要在 minutes 期间调用 setKey 并根据记录 here 进行相应调整，例如：

dateAxis.dateFormats.setKey("minute", "MMM dd\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM dd\nHH:mm");

下面完全更新的代码：

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/8se3o";
chart.dataSource.events.on("parseended", function(ev) {
  // parsed data is assigned to data source's `data` property
  var data = ev.target.data;
  data.sort(function(lhs, rhs) {
    return lhs.time - rhs.time;
  });
  data.forEach(function(item) {
    item.time *= 1000;
  });
});

chart.dateFormatter.inputDateFormat = "x";


var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormats.setKey("minute", "MMM dd\nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "MMM dd\nHH:mm");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "outDiff";
series.dataFields.valueY = "outDiff";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;

var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "inDiff";
series2.dataFields.dateX = "time";
series2.dataFields.valueY = "inDiff";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();


chart.legend = new am4charts.Legend();
chart.legend.position = "top";

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: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

amcharts4 格式化来自 unix 时间戳的日期

amcharts4 Format date from unix timestamp

html

javascript

css

amcharts

amcharts4