22
मैं jQuery के लिए एक प्लगइन का उपयोग कर रहा FLOT http://code.google.com/p/flot/एक .png या अन्य छवि प्रारूप में एक jQuery फ़्लोट ग्राफ को कैसे सहेजना है?
कहा जाता है एक बार ग्राफ प्रदान की गई है मैं ग्राहक बाद के लिए एक फाइल करने के लिए ग्राफ को बचाने के लिए सक्षम होना चाहते हैं। कुछ उपकरण या छवि कैप्चर डिवाइस डाउनलोड करने के लिए क्लाइंट की आवश्यकता के बिना यह कैसे किया जा सकता है इस पर कोई विचार है?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Graph</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="lib/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="lib/canvas2image/base64.js"></script>
<script language="javascript" type="text/javascript" src="lib/canvas2image/canvas2image.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="lib/gChart/jquery.gchart.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.selection.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.crosshair.js"></script>
<script language="javascript" type="text/javascript" src="lib/flot/jquery.flot.navigate.js"></script>
<style>
</style>
</head>
<body>
<div id="placeholder" style="width:1000px;height:400px;"></div>
<div id="test" style="display: none; background: #ff0; padding: 5px; border: 1px solid #ddd; position: absolute;"></div>
<script type="text/javascript">
$(function() {
var options0 = {
xaxis: {mode: "time"},
legend: {position: "nw"},
lines: {show: true},
grid: {hoverable: true}};
var grid_data0 = [[new Date(1286172000 * 1000), 1219], [new Date(1286258400 * 1000), 1583], [new Date(1286344800 * 1000), 1566], [new Date(1286431200 * 1000), 2191], [new Date(1286517600 * 1000), 2471], [new Date(1286604000 * 1000), 3128], [new Date(1286690400 * 1000), 2713], [new Date(1286776800 * 1000), 2117], [new Date(1286863200 * 1000), 3174], [new Date(1286949600 * 1000), 3051], [new Date(1287036000 * 1000), 3582], [new Date(1287122400 * 1000), 3472], [new Date(1287208800 * 1000), 3928], [new Date(1287295200 * 1000), 3688], [new Date(1287381600 * 1000), 2547], [new Date(1287468000 * 1000), 1549], [new Date(1287554400 * 1000), 3008], [new Date(1287640800 * 1000), 2309], [new Date(1287727200 * 1000), 2973], [new Date(1287813600 * 1000), 3805], [new Date(1287900000 * 1000), 3643], [new Date(1287986400 * 1000), 2310], [new Date(1288072800 * 1000), 2323], [new Date(1288159200 * 1000), 2399], [new Date(1288245600 * 1000), 2305], [new Date(1288332000 * 1000), 2393], [new Date(1288418400 * 1000), 3212], [new Date(1288504800 * 1000), 3348], [new Date(1288591200 * 1000), 2391], [new Date(1288677600 * 1000), 2130], [new Date(1288764000 * 1000), 1896], [new Date(1288850400 * 1000), 1765], [new Date(1288936800 * 1000), 2191], [new Date(1289023200 * 1000), 3008], [new Date(1289109600 * 1000), 3085], [new Date(1289199600 * 1000), 2151], [new Date(1289286000 * 1000), 2011], [new Date(1289372400 * 1000), 2016], [new Date(1289458800 * 1000), 1914]];
var plot = $.plot($("#placeholder"), [{data: grid_data0}, ], options0);
});
$("#placeholder").mouseout(function(e){
$("#test").hide();
});
function test() {
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//img=document.createElement("img");
//Save
//img.src=oCanvas.toDataUrl();
//Restore
//oCanvas.drawImage(img, 0, 0);
//var oCanvas = $("#placeholder");//document.getElementById("placeholder");
//document.write(document.getElementById('placeholder').toDataUrl());
Canvas2Image.saveAsPNG(document.getElementById('placeholder'));
//Canvas2Image.saveAsPNG(oCanvas, true);
}
</script>
<a onClick="JavaScript:test();">Click</a>
</body>
</html>
मैं कुछ त्रुटि जब मैं कोशिश करते हैं और इसे चलाने के "oScaledCanvas.toDataURL कार्य नहीं है" मिलता है। यह भी प्रतीत होता है कि यह केवल आईई ब्राउज़र में काम करता है। (मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूं, हालांकि, क्लाइंट IE का उपयोग कर सकता है)। – Josh
आपको आईई में कैनवास का समर्थन करने में बहुत दर्द हो रहा है। (याद है, मैं तुम्हें चेतावनी दी थी।) – Hogan
toDataURL एचटीएमएल 5 का हिस्सा है: http://www.w3.org/TR/html5/the-canvas-element.html – Hogan