在图表加载时显示加载图像

Question

我正在使用CanvasJs图表。图表工作正常。图表需要时间来加载。我想在图表加载之前显示加载图像。 CanvasJs图表没有为此定义的属性。任何帮助表示赞赏。

HTML：

 

JS： chart = CanvasJS.Chart（“chartContainer1”，{}）;

Answer 1

您可以在图表容器div中添加loader-image（gif）或一些文本，以便在div中显示图像/文本，直到图表初始化为止。

＆＃13;

＆＃13;

setTimeout(function(){
var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Basic Column Chart"
  },
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
});

chart.render();
},2000);

＆＃13;

img{
  display: block;
  margin: auto;
}

＆＃13;

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;">
  <img src="https://i.imgur.com/fXUIBfi.gif" alt="Chart will Render Here..."/>
</div>

＆＃13;

＆＃13;

＆＃13;