1

Chart.jsで 2 つ以上のリンクされた Canvas-Charts を処理するには? このスクリプトを使用すると、キャンバス イメージがより大きなバージョンにリンクされて、大きなファイルがファンシー ボックスに表示されるか、2 つだけダウンロードされます (右クリック -> 保存)。簡単。

<a HREF="#" id="canvas_link_1">
<canvas id="image1"></canvas>
</a>

<a HREF="#" id="canvas_link_2">
<canvas id="image2"></canvas>
</a>

Chart.jsでtoDataURL()を使用するには少し注意が必要です。これは、アニメーションが終了する前ではなくチャート全体をレンダリングするためです。URL を要求するのが早すぎると、空の (透明な) 画像が表示されます。そのため、オプションにonAnimationCompleteが必要です。

var options = { 
onAnimationComplete: done
}

スクリプトの後半で、アニメーションが終了すると、新しい HREF が起動/変更されます。

var ct1 = document.getElementById("image1").getContext("2d");
ct1.canvas.width = document.getElementById("image1").offsetWidth;
ct1.canvas.height = document.getElementById("image1").offsetHeight;
var Chart1  = new Chart(ct1).Line(lineChartData1,options);

function done() {
var url1=document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href=url1;
}

var ct2 = document.getElementById("image2").getContext("2d");
ct2.canvas.width = document.getElementById("image2").offsetWidth;
ct2.canvas.height = document.getElementById("image2").offsetHeight;
var Chart2  = new Chart(ct2).Line(lineChartData2,options);

function done() {
var url2=document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href=url2;
}

それはうまくいきます。ただし、canvas-imageは1 つだけです。2 番目の関数 done()を削除すると、1 番目のキャンバスで機能します。1 番目の関数を削除すると、2 番目のキャンバスだけが URL を表示します。

問題は「完了」にあると思います。それは名前ではなく、状況のようなものですか? 「var options」はすべてのキャンバス画像に一般的です（確かに、options1とoptions2、および「Line（lineChartData1、options1）」にも変更できますが、変更はありません）...「done」はすべての関数を起動しますそして - それは悪い - どうやら最後の機能だけです。

反対側では、onAnimationCompleteのエントリの名前を変更できません。それはnullまたは完了であり、他には何もありません。何をすべきか？

4

1 に答える 1

0

異なる名前の異なるコールバックを持つことができます。「完了」は単なる名前の例です (より適切な名前はおそらく「完了」です)。

例 - まず、各チャートに 1 つずつ、2 つのオプション オブジェクトを作成します。

var options1 = { 
    onAnimationComplete: done1
};

var options2 = { 
    onAnimationComplete: done2
};

次に、それらでチャートを初期化します。

...
var Chart1  = new Chart(ct1).Line(lineChartData1, options1);

...
var Chart2  = new Chart(ct2).Line(lineChartData2, options2);

最後にコールバックを定義します。

function done1() {
    var url = document.getElementById("image1").toDataURL();
    document.getElementById("canvas_link_1").href = url;
}

function done2() {
    var url = document.getElementById("image2").toDataURL();
    document.getElementById("canvas_link_2").href = url;
}

これが役立つことを願っています（そして私は問題を正しく理解していました）！

于 2014-04-15T15:20:01.490 に答える