Skip to content

Instantly share code, notes, and snippets.

@fwolf

fwolf/flotr2-example.html

Created February 28, 2015 05:17
Show Gist options
  • Save fwolf/fcf3340bbb193ed874ce to your computer and use it in GitHub Desktop.
Save fwolf/fcf3340bbb193ed874ce to your computer and use it in GitHub Desktop.
Download ZIP
Stuff when learning flotr2
Raw
flotr2-example.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="Author" content="Fwolf &lt;[email protected]&gt;, http://www.fwolf.com/" />
<link rel="stylesheet" href="../../css/reset.css" type="text/css" media="screen, print" />
<link rel="stylesheet" href="../../css/default.css" type="text/css" media="screen, print" />
<style type="text/css" media="screen">
<!--
h1 {
margin-top: -0.8em;
}
#graph {
width : 600px;
height: 480px;
margin: 1em auto;
}
-->
</style>
</head>
<body>
<h1>Flotr2 Example</h1>
<script type='text/javascript' src='/js/jquery.js'></script>
<!-- Need jQuery -->
<!--[if lt IE 9]>
<script type='text/javascript' src='/js/flashcanvas.js'></script>
<script type='text/javascript'>
var canvas = document.createElement('canvas');
//document.getElementById('graph').appendChild(canvas);
$(canvas).hide(); // Or this will leave some visible space.
$('body').get(0).appendChild(canvas);
if (typeof FlashCanvas != 'undefined') {
// setOptions is in FlashCanvasPro version
FlashCanvas.setOptions({
disableContextMenu : true
});
FlashCanvas.initElement(canvas);
}
</script>
<![endif]-->
<script type='text/javascript' src='/js/flotr2.min.js'></script>
<div id='graph'></div>
<script type='text/javascript'>
// Make data
var data = [];
for (i = 0; i < 8; i ++) {
data[i] = [i, Math.ceil(Math.random() * 1000)];
}
// Draw graph
var g = $('#graph').get(0);
var graph = Flotr.draw (g, [data], {
// When HtmlText is false, all text will disppear when mouse track show.
// But with HtmlText true, saved canvas not contain text.
HtmlText : true,
fontSize : 9,
bars : {
show : true,
horizontal : false,
shadowSize : 0,
barWidth : 0.7
},
mouse : {
track : true,
relative : true,
trackFormatter : function (obj) {
return '横轴: ' + obj.x + ' 代表值: ' + obj.y;
}
},
xaxis : {
title : 'X 轴大家好',
// titleAngle : 45,
// labelsAngle : 45,
showMinorLabels : false,
tickFormatter : function (x) {
return 'X轴.' + data[Math.ceil(x)][0];
}
},
yaxis : {
min : 0,
autoscaleMargin : 1
}
});
</script>
<!-- http://jsfiddle.net/PkwdT/ -->
<button id='download' name='download'
onclick='graph.download.saveImage("png");'>
保存为图片 原生</button>
<!--[if lt IE 9]>
<script type='text/javascript'>$('#download').hide();</script>
<![endif]-->
<!-- FlashCanvas.saveImage Not work in IE lt 9 -->
<!--
<script type='text/javascript' src='/js/base64.js'></script>
<script type='text/javascript' src='/js/canvas2image.js'></script>
<button id='download2' name='download2'>
保存为图片 Canvas2Image</button>
<script type='text/javascript'>
$('#download2').click(function () {
var canvas2 = $('canvas')[0];
if ('undefined' != typeof FlashCanvas) {
FlashCanvas.saveImage(canvas2);
}
else {
var data = canvas2.toDataURL('image/png');
data = data.replace('image/png', 'image/octet-steam');
document.location.href = data;
}
});
</script>
-->
<div id="footer">
<span id="copyright">
Copyright &copy; 2005-2012 <a href="http://www.fwolf.com/">Fwolf</a>, All Rights Reserved.
</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment