Ошибка Amcharts 4 на оси дат

ProgramBox

Ошибка Amcharts 4 на оси дат

Post author:admin
Запись опубликована:16 декабря, 2022
Post category:Вопросы по программированию

#javascript #date #amcharts

#javascript #Дата #amcharts

Вопрос:

Я создаю двумерную диаграмму amchart. Если дата указана до 1945 года, показанное время отображается на 1 час вперед.

На изображении ниже курсор находится на времени 02:00, а всплывающая подсказка показывает 03:00.

 // Use themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

// Add data
chart.data = [{
  "date": new Date(1818, 3, 2, 0, 0, 0),
  "value": 90
}, {
  "date": new Date(1818, 3, 2, 1, 0, 0),
  "value": 102
}, {
  "date": new Date(1818, 3, 2, 2, 0, 0),
  "value": 65
}, {
  "date": new Date(1818, 3, 2, 3, 0, 0),
  "value": 125
}, {
  "date": new Date(1818, 3, 2, 4, 0, 0),
  "value": 55
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "date";
lineSeries.strokeWidth = 3;
lineSeries.showOnInit = false;
lineSeries.tooltipText = "{date}: [b]{valueY}[/]";

chart.cursor = new am4charts.XYCursor();

 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>

Развернуть фрагмент

Я попытался изменить формат даты или часовой пояс даты, но это не сработало.

Ответ №1:

Мне потребовалось некоторое время, чтобы понять это:

Решение состоит в том, чтобы изменить даты, указанные в chart.data from

 new Date(1818, 3, 2, 0, 0, 0)

Для

 new Date(Date.UTC(1818, 3, 2, 0, 0, 0))

при этом также устанавливается

 chart.dateFormatter.utc = true

Теперь ось, а также точки данных начинаются 00:00 синхронно.
Я протестировал свое решение в нескольких часовых поясах с тем же результатом.

 // Use themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

// Add data
chart.data = [{
  "date": new Date(Date.UTC(1818, 3, 2, 0, 0, 0)),
  "value": 90
}, {
  "date": new Date(Date.UTC(1818, 3, 2, 1, 0, 0)),
  "value": 102
}, {
  "date": new Date(Date.UTC(1818, 3, 2, 2, 0, 0)),
  "value": 65
}, {
  "date": new Date(Date.UTC(1818, 3, 2, 3, 0, 0)),
  "value": 125
}, {
  "date": new Date(Date.UTC(1818, 3, 2, 4, 0, 0)),
  "value": 55
}];

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.utc = true

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "value";
lineSeries.dataFields.dateX = "date";
lineSeries.strokeWidth = 3;
lineSeries.showOnInit = false;
lineSeries.tooltipText = "{date}: [b]{valueY}[/]";

chart.cursor = new am4charts.XYCursor();

 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>

Развернуть фрагмент

1. Посмотрите на результат вашего фрагмента, ошибка усугубилась!

2. @hmdd Извините, думал, что нужно исправить только разницу. Теперь лучше? Ключ в том, что нужно иметь возможность настраивать оба смещения по своему вкусу.

3. спасибо, кажется, стало лучше. сейчас время совпадает, но оно показывает неправильное время! не могли бы вы исправить эту проблему?

4. Для меня это так. Так что это зависит от часового пояса. Но, поскольку я тестировал с несколькими разными часовыми поясами, я также получил совершенно разные результаты, даже при использовании utc = true . Это зависит от часового пояса пользователя, хотя в соответствии с документацией этого не должно быть…

5. Есть ли какое-либо решение?

Ответ №2:

вы пробовали это?

 chart.dateFormatter.timezoneOffset = 300;

или

 chart.dateFormatter.utc = true;