即使出现图表，amchart 指标加载也不会停止

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();
});

...

fiddle: https://jsfiddle.net/davidliang2008/akpe5f4b/1/

即使出现图表，amchart 指标加载也不会停止

amchart indicator loading not stopping even chart is appear

amcharts