загрузка индикатора amchart не прекращается даже при появлении графика - PullRequest
Новая
       6

загрузка индикатора amchart не прекращается даже при появлении графика

0 голосов
/ 30 ноября 2018

я попробую использовать плагин 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>

im.Попробуйте несколько методов, но не повезло для меня.Любое предложение

1 Ответ

0 голосов
/ 30 ноября 2018

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

...