Линейный график AmCharts v4, дата начала осаждена на 1 месяц - PullRequest
Новая
       27

Линейный график AmCharts v4, дата начала осаждена на 1 месяц

1 голос
/ 30 января 2020

Используя amcharts 4 я показываю xy диаграмму (простой линейный график). Каждая точка данных имеет набор данных в файле chart.data, первый как и следующий с интервалом в 1 неделю: 

{
   "Date": new Date(2015, 12, 31), 
   "Value: 12345,
   "LineColor: "#000000"
}, {
   "Date": new Date(2016, 01, 07), 
   "Value: 234567,
   "LineColor: "#000000"
}

Несмотря на это, первая точка оси A, отображаемая на диаграмме, (после форматирования) Вс 31 января 2016 , который не входит в число введенных дат.

Если я изменю dateAxis.baseInterval на timeUnit: "week", count: 1, я получу 28 января 2016 , который входит в число вводимых даты, но 5-е сверху.

Я искал что-то похожее на эту проблему, но не похоже, что это часто испытываемая проблема. Я упускаю какой-то фрагмент кода, который заставляет dateaxis фактически использовать ввод даты?

Извините за отсутствие примера кода, при необходимости я могу добавить больше, но в настоящее время он находится на уединенной машине.

1 Ответ

0 голосов
/ 31 января 2020

Обратите внимание, что ваше первое свидание не декабрь. Месяцы в JavaScript Дата API go от 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>
...