javascript - 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通过 "x" 解析它inputDateFormatter 中的代码，如文件所示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列出对象并为要重新格式化的时间段设置适当的日期格式。由于您的数据以分钟为单位，因此您需要调用 setKey在 minutes 上期间并根据文件进行相应调整 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>