Chartがロードされているときに画像を表示する

Question

CanvasJsチャートを使用しています。チャートは正常に動作しています。チャートの読み込みに時間がかかります。グラフが読み込まれるまで、読み込み中の画像を表示したかったのです。 CanvasJsチャートにはこのための属性は定義されていません。どんな助けもありがとうございます。

HTML：

JS： チャート= CanvasJS.Chart（ "chartContainer1"、{}）。

Answer 1

チャートコンテナdiv内にローダイメージ（gif）またはテキストを追加して、チャートが初期化されるまで画像/テキストがdivに表示されるようにすることができます。

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

 
chart.render(); 
 
},2000);

img{ 
 
    display: block; 
 
    margin: auto; 
 
}

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