错误描述
你好。我刚遇到这个错误，即当有新数据时，每次重新加载图表时都会创建重复/鬼影弹。我通过深入研究文档竭尽全力，但我无法摆脱这些幽灵弹。我不确定系统中是否有任何错误，或者我做错了什么。任何帮助将不胜感激。谢谢，
这里是正在运行的错误的记录：
https://user-images.githubusercontent.com/39606861/82709400-83bff900-9c4e-11ea-9964-62fdae30f9d0.gif
这是我用来开发图表的代码：
import React, { Component } from "react";
import { isEqual } from "lodash";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import "./index.scss";
import { timeInIST } from "../../../utils/time";
am4core.useTheme(am4themes_animated);
am4core.options.onlyShowOnViewport = true;
am4core.options.queue = true;
export default class index extends Component {
componentDidMount() {
let chart = am4core.create(this.props.name, am4charts.XYChart);
chart.colors.list = [
am4core.color("#FFFDAD"),
am4core.color("##F4A460"),
am4core.color("#75B9FF"),
am4core.color("#FF94BA"),
];
chart.dateFormatter.dateFormat = "yyyy-MM-dd";
chart.dateFormatter.utc = false;
chart.paddingRight = 20;
let loadPredictionEvents = this.props.loadPredictionEvents || [];
chart.data = loadPredictionEvents;
chart.legend = new am4charts.Legend();
chart.legend.labels.template.fill = am4core.color("#FFFFFF");
chart.legend.labels.template.propertyFields.fill = "stroke";
chart.legend.position = "top";
chart.legend.itemContainers.template.paddingTop = 5;
chart.legend.itemContainers.template.paddingBottom = 5;
chart.legend.fontSize = 15;
chart.legend.marginBottom = 25;
let marker = chart.legend.markers.template.children.getIndex(0);
marker.cornerRadius(12, 12, 12, 12);
marker.strokeWidth = 5;
let markerTemplate = chart.legend.markers.template;
markerTemplate.width = 10;
markerTemplate.height = 10;
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.labels.template.fill = am4core.color("#FFFFFF");
dateAxis.title.text = "Time (IST)";
dateAxis.title.fill = am4core.color("#FFFFFF");
dateAxis.renderer.grid.template.location = 0;
dateAxis.fontSize = 15;
dateAxis.skipEmptyPeriods = true;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.keepSelection = true;
dateAxis.groupData = true;
dateAxis.dateFormats.setKey("day", "yyyy-MM-dd");
dateAxis.periodChangeDateFormats.setKey("day", "yyyy-MM-dd");
dateAxis.groupIntervals.setAll([{ timeUnit: "minute", count: 15 }]);
dateAxis.minZoomCount = 5;
dateAxis.showOnInit = false;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.fill = am4core.color("#FFFFFF");
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
valueAxis.title.text = "Load (MW)";
valueAxis.fontSize = 15;
valueAxis.title.fill = am4core.color("#FFFFFF");
valueAxis.min = 0;
valueAxis.renderer.grid.template.disabled = false;
let series1 = chart.series.push(new am4charts.LineSeries());
series1.name = "Actual Load";
series1.tooltipText = this.renderTooltip("actual_load");
series1.dataFields.dateX = "timestamp_axis";
series1.dataFields.valueY = "actual_load_axis";
series1.dataFields.timestamp = "timestamp";
series1.dataFields.actual_load = "actual_load";
series1.tooltip.getFillFromObject = false;
series1.tooltip.background.fill = am4core.color("#FFFDAD");
series1.tooltip.label.fill = am4core.color("#000");
series1.stroke = am4core.color("#FFFDAD");
series1.strokeWidth = 2;
series1.connect = false;
series1.showOnInit = false;
let series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "Streaming Load";
series2.tooltipText = this.renderTooltip("streaming_load");
series2.dataFields.dateX = "timestamp_axis";
series2.dataFields.valueY = "streaming_load_axis";
series2.dataFields.timestamp = "timestamp";
series2.dataFields.streaming_load = "streaming_load";
series2.tooltip.getFillFromObject = false;
series2.tooltip.background.fill = am4core.color("#F4A460");
series2.tooltip.label.fill = am4core.color("#000");
series2.stroke = am4core.color("#F4A460");
series2.strokeWidth = 2;
series2.connect = false;
series2.showOnInit = false;
let series3 = chart.series.push(new am4charts.LineSeries());
series3.name = "Day Ahead Indicator";
series3.tooltipText = `Dispatch Type: [bold]Day Ahead[/]
Time (IST): {day_ahead_indicator.formatDate('yyyy-MM-dd HH:mm:ss')} `;
series3.dataFields.dateX = "timestamp_dayahead_indicator_axis";
series3.dataFields.valueY = "day_ahead_indicator_value";
series3.dataFields.day_ahead_indicator = "day_ahead_indicator";
series3.dataFields.timestamp_dayahead_indicator =
"timestamp_dayahead_indicator";
series3.strokeOpacity = 0;
series3.sequencedInterpolation = true;
series3.tooltip.background.fill = am4core.color("#75B9FF");
series3.minBulletDistance = 15;
series3.showOnInit = false;
series3.autoDispose = true;
let bullet = series3.bullets.push(new am4charts.Bullet());
bullet.isDynamic = true;
let triangle = bullet.createChild(am4core.Triangle);
triangle.width = 11;
triangle.height = 11;
triangle.dy = 5;
triangle.direction = "bottom";
triangle.propertyFields.fill = am4core.color("#75B9FF");
triangle.propertyFields.fillOpacity = 1;
triangle.fillOpacity = 1;
triangle.strokeWidth = 1;
triangle.horizontalCenter = "middle";
triangle.verticalCenter = "bottom";
let hoverState = bullet.states.create("hover");
hoverState.properties.scale = 1.7;
let series4 = chart.series.push(new am4charts.LineSeries());
series4.name = "Rolling 24H Indicator";
series4.tooltipText = `Dispatch Type: [bold]Rolling 24h[/]
Time (IST): {rolling_24h_indicator.formatDate('yyyy-MM-dd HH:mm:ss')}`;
series4.dataFields.dateX = "timestamp_rolling_indicator_axis";
series4.dataFields.valueY = "rolling_indicator_value";
series4.dataFields.rolling_24h_indicator = "rolling_24h_indicator";
series4.dataFields.timestamp_rolling_indicator =
"timestamp_rolling_indicator";
series4.strokeOpacity = 0;
series4.sequencedInterpolation = true;
series4.tooltip.background.fill = am4core.color("#FF94BA");
series4.minBulletDistance = 15;
series4.showOnInit = false;
series4.autoDispose = true;
let bullet01 = series4.bullets.push(new am4core.Circle());
bullet01.radius = 5;
bullet01.propertyFields.fill = am4core.color("#FF94BA");
bullet01.fillOpacity = 1;
bullet01.isDynamic = true;
let hoverState1 = bullet01.states.create("hover");
hoverState1.properties.scale = 1.7;
let range = dateAxis.axisRanges.create();
range.date = timeInIST();
range.grid.stroke = am4core.color("red");
range.grid.strokeWidth = 1;
range.grid.strokeOpacity = 0.5;
chart.cursor = new am4charts.XYCursor();
chart.showOnInit = true;
chart.zoomOutButton.dom.addEventListener("click", this.resetDateSelector);
chart.maskBullets = true;
chart.events.on("shown", () => {
dateAxis.zoomToDates(this.setStartTime(7), this.setEndTime(2), false);
});
this.chart = chart;
this.dateAxis = dateAxis;
}
componentDidUpdate(oldProps) {
if (
!isEqual(
oldProps.loadPredictionEvents,
this.props.loadPredictionEvents
) &&
typeof this.props.loadPredictionEvents === "object" &&
this.props.loadPredictionEvents.length !== 0
) {
this.chart.data = this.props.loadPredictionEvents;
this.chart.reinit();
}
}
componentWillUnmount() {
if (this.chart) {
this.chart.dispose();
}
}
renderTooltip = (name) => {
return `{name}: [bold]{${name}}[/]
Time (IST): {timestamp.formatDate('yyyy-MM-dd HH:mm:ss')}[/]`;
};
setStartTime = (days) => {
let currentDate = new Date();
let pastTime = currentDate.setDate(currentDate.getDate() - days);
return timeInIST(pastTime);
};
setEndTime = (days) => {
let currentDate = new Date();
let futureTime = currentDate.setDate(currentDate.getDate() + days);
return timeInIST(futureTime);
};
resetDateSelector = () => {
this.dateAxis.zoomToDates(this.setStartTime(7), this.setEndTime(2));
};
render() {
return (
<div
id={this.props.name}
style={{ width: "100%", minHeight: "550px" }}
></div>
);
}
}
环境
我能够通过使用以下代码来解决此问题：
for (const series of chart.series) { series.bulletsContainer.disposeChildren() }
设置前
chart.data = data;
我能够从以下Amcharts4错误问题＃1908线程获得此解决方案：https://github.com/amcharts/amcharts4/issues/1908