还会出现挂图指示符加载，甚至图表都不会停止。

Question

我试着在我的系统中使用Amchart。当我运行图表的基本代码时，会出现成功的图表。然后，我尝试使用一个自定义的加载指示器。但问题是加载指示符，没有停止，甚至出现图表。

下面是JS脚本

am4core.useTheme(am4themes_animated);

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

// Add data
chart.data = [{
  "category": "Research",
  "value": 450
}, {
  "category": "Marketing",
  "value": 1200
}, {
  "category": "Distribution",
  "value": 1850
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";

var indicator;
var indicatorInterval;

function showIndicator() {

  if (!indicator) {
    indicator = chart.tooltipContainer.createChild(am4core.Container);
    indicator.background.fill = am4core.color("#fff");
    indicator.width = am4core.percent(100);
    indicator.height = am4core.percent(100);

    var indicatorLabel = indicator.createChild(am4core.Label);
    indicatorLabel.text = "Loading stuff...";
    indicatorLabel.align = "center";
    indicatorLabel.valign = "middle";
    indicatorLabel.dy = 50;

    var hourglass = indicator.createChild(am4core.Image);
    hourglass.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/hourglass.svg";
    hourglass.align = "center";
    hourglass.valign = "middle";
    hourglass.horizontalCenter = "middle";
    hourglass.verticalCenter = "middle";
    hourglass.scale = 0.7;
  }

  indicator.hide(0);
  indicator.show();

  clearInterval(indicatorInterval);
  indicatorInterval = setInterval(function() {
    hourglass.animate([{
      from: 0,
      to: 360,
      property: "rotation"
    }], 2000);
  }, 3000);
}

function hideIndicator() {
  indicator.hide();
  clearInterval(indicatorInterval);
}

showIndicator();

下面是html代码

<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>

我已经尝试了几种方法，但对我来说并不幸运。任何建议

Answer 1

在amchart4文档(https://www.amcharts.com/docs/v4/tutorials/custom-loading-indicator/)上，它只显示了如何创建自定义加载指示符。当图表完成呈现时，它不会连接hideIndicator()事件。

现在可以使用Ready事件(https://github.com/amcharts/amcharts4/issues/436#issuecomment-441370242)。您可以简单地将hideIndicator()函数连接到Ready事件：

...

chart.events.on("ready", function(ev){
    hideIndicator();
});

...

小提琴： https://jsfiddle.net/davidliang2008/akpe5f4b/1/