AmCharts v4线形图,开始日期轴晚1个月 [英] AmCharts v4 linechart, starts dateaxis 1 month late
问题描述
使用amcharts 4我正在显示一个xy图表(简单的线图).每个数据点都在chart.data中设置了数据集,第一个和之后的间隔为1周:
Using amcharts 4 i am displaying an xy chart (simple line graph). Each datapoint has the data set in chart.data, the first as and the following with 1 week intervals:
{
"Date": new Date(2015, 12, 31),
"Value: 12345,
"LineColor: "#000000"
}, {
"Date": new Date(2016, 01, 07),
"Value: 234567,
"LineColor: "#000000"
}
尽管如此,图表上显示的第一个dateAxis点(格式化后)是 2016年1月31日星期日,它不在输入的日期之内.
Despite this, the first dateAxis point displayed on the chart is (after formatting) Sun 31 Jan 2016, which is not among the dates input.
如果我将 dateAxis.baseInterval
更改为 timeUnit:"week",计数:1
我会得到 2016年1月28日,输入日期,但从顶部起第5位.
If i change the dateAxis.baseInterval
to timeUnit: "week", count: 1
I get 28 jan 2016, which is amongst the input dates, but the 5th from the top.
我一直在寻找与该问题类似的东西,但似乎这不是一个经常遇到的问题.我是否错过了一些强制日期轴实际使用日期输入的代码?
I have been searching for something similar to this problem, but it does not seem like this is a commonly experienced problem. Am I missing out on some piece of code that forces the dateaxis to actually use the date input?
很抱歉缺少代码示例,如果需要的话,我可以提供更多示例,但目前它位于一台僻静的计算机上.
Sorry for the lack of code example, if needed i can include more, but currently it's on a secluded machine.
推荐答案
请注意,您的第一个日期不是12月.JavaScript Date API中的月份从0-11开始,这说明了为什么将其设置为1月而第二个日期是2月.
Note that your first date is not December. Months in the JavaScript Date API go from 0-11, which explains why it gets set to January instead and the second date is in Feburary.
如果您想在轴上获得更多的粒度,请将baseInterval设置为一天而不是一周/七天:
If you want more granularity in your axis, set the baseInterval to a day instead of a week/seven days:
dateAxis.baseInterval = {
"timeUnit": "day",
"count": 1
};
如果只想显示数据标签,请将 skipEmptyPeriods
设置为true.
If you only want to show labels from your data, set skipEmptyPeriods
to true as well.
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>
这篇关于AmCharts v4线形图,开始日期轴晚1个月的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!