次の問題のため、これらの解決策のいずれにも満足していませんでした。
- ダニのラベルがキャンバスに表示されていません
- 軸ラベルがキャンバスにありません
- Firefoxをcanvas2imageで保存すると、通常のユーザーは混乱します
この問題の解決策は、チャートのオプションを変更してキャンバスのみのチャートとして再プロットし、次に、canvas-to-blobを使用してこのチャートをblobに変換し、FileSaverを使用してユーザーのblobを保存し、最後にチャートを再プロットすることです。画像を保存した後。
次のJSプラグインが必要です。
コード:
//set data array, and options
$('a.download_as_img').click(function(e){
e.preventDefault();
saveAsImage(graph_selector, data, options, xaxis,yaxis)
})
function saveAsImage(graph_selector, data_arr, options, xaxis, yaxis){
var canvas = replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis);
var title = 'chart';// or some jquery way to get your title or w/e
canvas.toBlob(function(blob) {
saveAs(blob, title + ".png");
});
//convert back to normal
var plot = $.plot(graph_selector, data_arr, options);
}
//helper for saveAsImage
// returns canvas
function replotChartAsCanvas(graph_selector, data_arr, options, xaxis, yaxis){
//change canvas options to true and replot
var canvas_options = {
canvas: true,
axisLabels: {
show: true
},
xaxes: [
{
axisLabelUseCanvas: true,
axisLabel: xaxis
}
],
yaxes: [
{
axisLabelUseCanvas: true,
position: 'left',
axisLabel: yaxis
}
]
}
var merged_opts = {}
$.extend(merged_opts, options, canvas_options); //done this way to ensure canvas_options take priority
var plot = $.plot(graph_selector, data_arr, merged_opts);
return plot.getCanvas();
}
おそらく、上記の解決策について同様の懸念がある場合は、これを試すことができます。