jQuery FLOT プラグインを使用してデータをプロットしています。画像を保存するために使用しているツールはcanvas2imageです。この小さなライブラリを使用すると、HTML5 キャンバス要素を画像ファイルとして保存できます。このコードは私のページで機能しており、キャンバス要素を保存できます。
私が抱えていた問題は、軸ラベルがキャンバスの一部ではなかったため、画像の一部として保存されていなかったことです. 次に、FLOT 0.8 がキャンバス プラグインを使用して軸ラベルをキャンバスに描画できることを知りました。FLOT 0.7 を使用していたので、ライブラリを新しいバージョン 0.8 に更新したところ、エラーが発生しました: TypeError: options.grid.borderWidth is null
.
FLOT のバージョン 0.7 に戻すと、エラー メッセージは消えますが、バージョン 0.8 ではエラーが発生します。flot プロットを含む div には幅と高さを指定する必要があることを知っています。そのため、これを使用しています: <div id="flot" style="height:10px; width:10px;"></div>
.
HTML でプロット エリアの幅と高さを指定するだけでなく、AJAX メソッドの成功のコールバックでも指定します。そのためのコードは次のとおりです。
$("#flotAverageSalePricesCity").result(function(event, data, formatted) {
if (data){
$.ajax({
url: sURL + "utility/ajaxmuniChart1c",
type: "POST",
data: {muni: data[0]},
dataType: 'json',
success: function(json){
if (data) {
myWidth = (document.getElementById('flot_widget').offsetWidth-45)+"px";
myHeight = (document.getElementById('flot_widget').offsetWidth*.66)+"px";
document.getElementById('flot').style.width = myWidth;
document.getElementById('flot').style.height = myHeight;
var options = {
series: {
lines: { show: true, fill: false, fillColor: "rgba(255, 255, 255, 0.8)" },
points: { show: true, fill: true }
}
};
var xxx = $.plot("#flot", [json], options);
var ctx = xxx.getCanvas();
cb = $('#flot').find('canvas.base');
canvas = cb.get(0);
loc = sURL + 'php/saveme.php';
var cs = new CanvasSaver(loc);
var btnSave = cs.generateButton('Save', canvas, 'PTS_Chart');
c3.appendChild(btnSave);
var btnSave2 = cs.generateButton('Save2', ctx, 'PTS_Chart2');
c3.appendChild(btnSave2);
}
}
})
}
})
このエラーが発生する理由を誰かが説明できますか? ありがとう。