onanimationCompleteは、アニメーションが行われる前に実行されます -- javascript フィールド と chart.js フィールド 関連 問題

onAnimationComplete is executed before animation is done












0
vote

問題

日本語

私のチャートのための chart.js を使用し、 .toDataURL を使用したいキャンバス

アニメーションがコールバック関数によって完了した後にURLを取得しようとしています onanimationCompleted ですが、My URLには空の画像が含まれています。アラートを置くと(コメントを参照)、アニメーションが視覚的に行われる前にアラートが表示されます。

これはHTML

です <事前> <コード> <h1>Chart as img</h1> <img id="foobar" src="" /> <h1>Original Canvas</h1> <canvas id="myChart" width="300" height="300"></canvas>

とJS:

<事前> <コード> var ctx = $("#myChart"); var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Red", "Blue",], datasets: [{ data: [ 12, 19 ], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', ], borderWidth: 1 }] }, options: { responsive: false, legend: { display: false, }, onAnimationComplete: done(), } }); function done() { var url = document.getElementById("myChart").toDataURL(); // alert(url); $("#foobar").attr("src", url); }

http://jsfiddle.net/7tjgf582/

英語

I use chart.js for my charts and want to use .toDataURL on the canvas.

I try to get the URL after the animation is completed by callback function onAnimationCompleted, but my URL contains an empty image. If I put an alert (see comment), the alert is shown before the animation is visually done.

Here's the HTML

<h1>Chart as img</h1> <img id="foobar" src="" />  <h1>Original Canvas</h1> <canvas id="myChart" width="300" height="300"></canvas> 

and JS:

var ctx = $("#myChart"); var myChart = new Chart(ctx, {     type: 'doughnut',     data: {         labels: ["Red", "Blue",],         datasets: [{             data: [                 12,                 19             ],             backgroundColor: [                 'rgba(255, 99, 132, 0.2)',                 'rgba(54, 162, 235, 0.2)',             ],             borderColor: [                 'rgba(255,99,132,1)',                 'rgba(54, 162, 235, 1)',             ],             borderWidth: 1         }]     },     options: {         responsive: false,         legend: {             display: false,         },         onAnimationComplete: done(),     } });  function done() {     var url = document.getElementById("myChart").toDataURL();     // alert(url);     $("#foobar").attr("src", url); } 

http://jsfiddle.net/7tjgf582/

</div
     

回答リスト

1
 
vote
vote
ベストアンサー
 

シンプルです。 call done 関数。

<事前> <コード> options: { responsive: false, legend: { display: false, }, onAnimationComplete: done // <--- no parentheses! }
 

Simple. Don't call the done function.

options: {     responsive: false,     legend: {         display: false,     },     onAnimationComplete: done // <--- no parentheses! } 
</div
 
 
 
 
1
 
vote

ブラウザでスクリプトを実行したときに、機能が<コード> called であるため、それが起こっていると思います。それはコールバックではありません。あなたはこれを試すことができます:

<事前> <コード> var done = function () { var url = document.getElementById("myChart").toDataURL(); // alert(url); $("#foobar").attr("src", url); }

とさらに:

<事前> <コード> $(element).prepend('<div id="getposition"></div>'); var left = $('#getposition',element).offset().left; $('#getposition',element).remove(); 0
 

I think that's happening because your function is being called directly when the script is executed in the browser. That's not a callback. You can try this:

var done = function () {     var url = document.getElementById("myChart").toDataURL();     // alert(url);     $("#foobar").attr("src", url); } 

And further:

//Notice how I am using the variable instead of calling the function. onAnimationComplete: done 
</div
 
 

関連する質問

0  複数の軸についてJavaScriptでチャートJSの下にループするにはどうすればよいですか。  ( How do i loop under chart js in javascript for multiple axis ) 
私はマルチ軸を有効にするためにチャートJSにループしようとしています...しかし、 ""のための "" "" "のための" "" ... <事前> <コード> var getData = $.get('/graphcomp'); getData.done(...

0  Chart.js&BPopup - ポップアップでグラフを作成する  ( Chart js bpopup make a chart in a popup ) 
私は学校に少しアプリケーションで働いています、それはポップアップの中にいくつかのチャートを与える必要があります。 問題はテストの途中で、を置くとき <コード> char** tokenize(char* str){ int totalWords = ...

1  NG2-Chartsはベースチャートオブジェクトにアクセスします  ( Ng2 charts access base chart object ) 
NG2-チャート折れてチャートを描画する。 (ChartClick)イベントのチャートDataPointコレクションにアクセスする必要があります。そのために、チャートの基本チャート.jsオブジェクトにアクセスする必要があります。チャートオブジェクトにアクセ...

2  Chart.jsグラフのClickは、凡例のOnClickを無効にします  ( Chart js chart onclick disables legend onclick ) 
カートを追加したばかりのバーチャートにカートを追加したのは、どのバーをクリックするかに応じてアクションを取ることを可能にする棒グラフに追加しました。 onclick機能をどのようにしていますか? 私はそれがチャートのonclick関数から凡例のonclick関...

1  水平棒グラフの上の水平線を取り外します(図Chart.js 2)  ( Remove top horizontal line in a horizontal bar chart chart js 2 ) 
チャートで水平にグループ化された棒グラフを作成しましたが、奇妙な問題に立ち往生しています。 この問題は、すべてのグリッド線と境界線を無効にしたが、チャートは依然としてリダオフしたいトップ横線を示していることです。 これはこのスクリーンショットに表示されています...

1  ToolTip allignement js v2  ( Tooltip alignement with chart js v2 ) 
ドーナツチャートでツールチップテキストを整列させるのに問題があります。 それはそのようなツールチップの下部に立ち往生し続けます: 私はそれを垂直に整列させたいと思います。 これは私が使用したデフォルトのオプションです <事前> <コード> Chart.d...

1  水平棒グラフスクロール可能なChartjsとAngular 2を作る  ( Making horizontal bar graph scrollable chartjs and angular2 ) 
私は良い数のデータを表示するチャートがあり、グラフバーが快適に表示されるようにスクロールできます - XAXISは、グラフの下にスクロールするためにXAXISは位置に残ります。< / P> これまでのもののプランクは、次のところです。 https://pln...

2  チャートを使用してバーの丸みを帯びた積み上げ棒グラフ  ( Stacked bar chart with rounded corner of bar using chart js ) 
私はさまざまなカスタムの例を試しました。 しかし、それらは単一のデータのみを提供していますが、私は丸いコーナーを持つ最後のデータが必要です href="https://jsfiddle.net/ankitkothari/7km2ytjo/2/" REL="n...

1  円グラフから0%を削除してください  ( Remove 0 from pie chart ) 
パイチャートから不要な0%を除去するのに問題があります。この番号は、利用可能なすべてのオプションの合計%の%を示しています。オプションがフィルタに従ってオプションを持っていない場合は、削除したいのが0%表示されます。私は以下のコードを貼り付けています。 <事前...

1  ChartJS ToolTipにさらにデータ要素を追加する  ( Adding more data elements to chartjs tooltip ) 
Chaltjsを使ってドーナツチャートを作り、ツールチップに追加の要素を追加する方法について興味があります。私のコードは以下の通りです: <事前> <コード> export const validationSchema = object().shape({ ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有