<分区>
<分区>
我希望将 1555596901 格式化为可读日期，例如 2019/04/19 11h52。
这是代码:
am4core.useTheme(am4themes_animated);
function createChart(htmlElement){
var chart = am4core.create(htmlElement, am4charts.XYChart);
chart.dateFormatter.dateFormat = "dd/MM/yyyy";
chart.data = [
{
category: "1555596901",
value1: 1,
value2: 5,
value3: 3,
value4: 3
},
{
category: "1555611301",
value1: 10,
value2: 8,
value3: 6,
value4: 4
}
];
chart.cursor = new am4charts.XYCursor();
chart.colors.step = 2;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dateFormatter.dateFormat = "dd/MM/yyyy";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.minWidth = 35;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.stacked = true;
series1.dateFormatter.dateFormat = "dd/MM/yyyy";
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(80);
series2.columns.template.tooltipText = "{name}: {valueY.value}";
series2.name = "Series 2";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
series2.stacked = true;
series2.dateFormatter.dateFormat = "dd/MM/yyyy";
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(80);
series3.columns.template.tooltipText = "{name}: {valueY.value}";
series3.name = "Series 3";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
series3.stacked = true;
series3.dateFormatter.dateFormat = "dd/MM/yyyy";
var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.columns.template.width = am4core.percent(80);
series4.columns.template.tooltipText = "{name}: {valueY.value}";
series4.name = "Series 4";
series4.dataFields.categoryX = "category";
series4.dataFields.valueY = "value4";
series4.stacked = true;
series4.dateFormatter.dateFormat = "dd/MM/yyyy";
return chart;
}
let chart1 = createChart("chartdiv");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>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>如您所见，它没有格式化时间戳。我在文档中看到我需要使用 chart.dateFormatter.dateFormat = "dd/MM/yyyy"; 进行格式化。
最佳答案
通过执行此操作，您可以将 unix 时间戳格式化为 JavaScript Date 对象。
const date1 = new Date(1555596901 * 1000);
console.log(date1);
然后，您可以通过执行此操作将其格式化为 dd/mm/yyyy；
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;
}
//formatDate(1555596901);
console.log(formatDate(1555596901));现在，在您的原始代码中，您只需添加上述 formatDate 函数，然后将其映射到您的 chart.data 上，如下所示。
chart.data = [
{
category: "1555596901",
value1: 1,
value2: 5,
value3: 3,
value4: 3
},
{
category: "1555611301",
value1: 10,
value2: 8,
value3: 6,
value4: 4
}
];
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.category = formatDate(element.category)
return element;
});
console.log(chart.data)
关于javascript - 如何在 amcharts4 中将时间戳 unix 格式化为日期，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55761457/