Что может быть причиной того, что не удаляется предыдущий кадр при анимации в amcharts5?
В проекте на Nuxt 3 поставил библиотеку amcharts5 , через которую рисую график (диаграмма с областями), основанный на данных по датам. Есть несколько табов над графиком, по которым можно приблизить/отдалить график сразу на заданный диапазон дат (табы "Последние 3 года", "Последний год", "Последний месяц"). Когда просто использую ползунок на графике, анимация отрабатывает нормально, когда нажимаю на табы (вызывается метод zoomToDates от объекта xAxis), то при анимации предыдущий кадр не исчезает, а остаётся на графике, из-за чего куча кадров наслаиваются друг на друга. Кто-нибудь сталкивался с подобным? Как решили? Сам код, ининициализирующий график, находится в файле chart.js , который подключается в компоненте, в котором подгружаются данные, сам компонент в , с этим всё в порядке. Ниже код файла chart.js
import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; function initChart(chartEl, chartData) { let root = am5.Root.new(chartEl); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create chart // https://www.amcharts.com/docs/v5/charts/xy-chart/ var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "zoomX", wheelY: "panY", paddingLeft: 0 }) ); // Add cursor // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/ var cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" })); cursor.lineY.set("visible", false); // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { minorGridEnabled: true, minGridDistance: 70 }), tooltip: am5.Tooltip.new(root, {layer: 10}) }) ); var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) ); // Add series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push( am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { labelText: "Доходность: [bold]{valueY}[/]" }) }) ); series.set("fill", am5.color('#820744')); series.set("stroke", am5.color('#820744')); series.fills.template.setAll({ fillOpacity: 0.2, visible: true }); series.strokes.template.setAll({ strokeWidth: 2 }); // Add scrollbar // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/ var scrollbar = chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" })); series.data.processor = am5.DataProcessor.new(root, { numericFields: ["value"], dateFields: ["date"], dateFormat: "yyyy-MM-dd" }); series.data.setAll(chartData); // Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear(1000); chart.appear(1000, 100); return xAxis; } export { initChart }; |
import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; function initChart(chartEl, chartData) { let root = am5.Root.new(chartEl); // Set themes // https://www.amcharts.com/docs/v5/concepts/themes/ root.setThemes([ am5themes_Animated.new(root) ]); // Create chart // https://www.amcharts.com/docs/v5/charts/xy-chart/ var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "zoomX", wheelY: "panY", paddingLeft: 0 }) ); // Add cursor // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/ var cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" })); cursor.lineY.set("visible", false); // Create axes // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/ var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { minorGridEnabled: true, minGridDistance: 70 }), tooltip: am5.Tooltip.new(root, {layer: 10}) }) ); var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }) ); // Add series // https://www.amcharts.com/docs/v5/charts/xy-chart/series/ var series = chart.series.push( am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { labelText: "Доходность: [bold]{valueY}[/]" }) }) ); series.set("fill", am5.color('#820744')); series.set("stroke", am5.color('#820744')); series.fills.template.setAll({ fillOpacity: 0.2, visible: true }); series.strokes.template.setAll({ strokeWidth: 2 }); // Add scrollbar // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/ var scrollbar = chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" })); series.data.processor = am5.DataProcessor.new(root, { numericFields: ["value"], dateFields: ["date"], dateFormat: "yyyy-MM-dd" }); series.data.setAll(chartData); // Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear(1000); chart.appear(1000, 100); return xAxis; } export { initChart };
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с отображением предыдущего кадра при анимации в amCharts 5 может возникать по нескольким причинам. Вот несколько возможных причин и способы их решения:
1. Неправильная настройка анимации: Убедитесь, что вы правильно настроили параметры анимации, такие как продолжительность, тип и задержка. Проверьте, что вы используете правильные методы и свойства для запуска анимации.
// Пример настройки анимации в amCharts 5 chart.animations.push({ property: 'opacity', to: 1, duration: 1000, easing: am5.ease.linear });
2. Проблемы с обновлением данных: Убедитесь, что вы правильно обновляете данные и перерисовываете график после каждого обновления. Если данные не обновляются правильно, предыдущий кадр может оставаться на экране.
3. Конфликты стилей или наложение элементов: Проверьте, нет ли конфликтов со стилями или наложения элементов на графике, которые могут мешать правильному отображению анимации.
4. Проблема с кэшированием: Попробуйте отключить кэширование для графика, чтобы убедиться, что предыдущий кадр не сохраняется из-за этой проблемы.
5. Обновите библиотеку: Убедитесь, что вы используете последнюю версию amCharts 5, так как в новых версиях могут быть исправлены проблемы с анимацией.
Если после проверки всех этих пунктов проблема все еще остается, обратитесь за помощью к официальной документации amCharts 5 или на форум поддержки, где другие разработчики могут помочь вам найти решение.