使用 amcharts 4,我显示 xy 图表(简单线图)。每个数据点都有图表数据中的数据集,第一个为以下,间隔为 1 周:
{
"Date": new Date(2015, 12, 31),
"Value: 12345,
"LineColor: "#000000"
}, {
"Date": new Date(2016, 01, 07),
"Value: 234567,
"LineColor: "#000000"
}
尽管如此,图表上显示的第一个 dateAxis 点是(格式化后)2016 年 1 月 31 日星期日,它不在输入的日期范围内。
如果我将 dateAxis.baseInterval
更改为 timeUnit: "week", count: 1
我得到 2016 年 1 月 28 日,其中输入日期,但是从顶部算起的第 5 个日期。
我一直在寻找与此问题类似的内容,但这似乎不是一个常见的问题。我是否错过了一些强制日期轴实际使用日期输入的代码?
抱歉缺少代码示例,如果需要,我可以包含更多示例,但目前它位于一台僻静的计算机上。
最佳答案
请注意,您的第一次约会不是十二月。 JavaScript Date API 中的月份从 0 到 11,这解释了为什么它被设置为一月,而第二个日期是二月。
如果您希望轴具有更大的粒度,请将 baseInterval 设置为一天而不是一周/七天:
dateAxis.baseInterval = {
"timeUnit": "day",
"count": 1
};
如果您只想显示数据中的标签,请将 skipEmptyPeriods
设置为 true。
dateAxis.skipEmptyPeriods = true;
下面的演示:
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = generateData();
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = {
"timeUnit": "day",
"count": 1
};
dateAxis.skipEmptyPeriods = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
function generateData() {
var data = [];
var firstDate = new Date(2015, 11, 31);
var i;
for (i = 0; i < 15; ++i) {
var nextDate = new Date(firstDate);
nextDate.setDate(nextDate.getDate() + (7 * i));
data.push({
"date": nextDate,
"value": Math.floor(Math.random() * 100 + 1 * i)
});
}
return data;
}
chart.cursor = new am4charts.XYCursor();
#chartdiv {
width: 100%;
height: 350px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
关于javascript - AmCharts v4 折线图,日期轴晚 1 个月开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59984725/