Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。可以看一下Flot的demo:
http://ajaxian.com/archives/plotting-in-jquery
绘制上面的图形所编写的JS也非常简单易读:
# <script id="source" language="javascript" type="text/javascript">
# $(function () {
# var d1 = [];
# for (var i = 0; i < 14; i += 0.5)
# d1.push([i, Math.sin(i)]);
#
# var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
#
# var d3 = [];
# for (var i = 0; i < 14; i += 0.5)
# d3.push([i, Math.cos(i)]);
#
# var d4 = [];
# for (var i = 0; i < 14; i += 0.5)
# d4.push([i, Math.sqrt(i * 10)]);
#
# var d5 = [];
# for (var i = 0; i < 14; i += 0.5)
# d5.push([i, Math.sqrt(i)]);
#
# $.plot($("#placeholder"), [
# {
# data: d1,
# lines: { show: true, fill: true }
# },
# {
# data: d2,
# bars: { show: true }
# },
# {
# data: d3,
# points: { show: true }
# },
# {
# data: d4,
# lines: { show: true }
# },
# {
# data: d5,
# lines: { show: true },
# points: { show: true }
# }
# ]);
# });
# </script>
http://code.google.com/p/flot/
http://ajaxian.com/archives/plotting-in-jquery
绘制上面的图形所编写的JS也非常简单易读:
# <script id="source" language="javascript" type="text/javascript">
# $(function () {
# var d1 = [];
# for (var i = 0; i < 14; i += 0.5)
# d1.push([i, Math.sin(i)]);
#
# var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
#
# var d3 = [];
# for (var i = 0; i < 14; i += 0.5)
# d3.push([i, Math.cos(i)]);
#
# var d4 = [];
# for (var i = 0; i < 14; i += 0.5)
# d4.push([i, Math.sqrt(i * 10)]);
#
# var d5 = [];
# for (var i = 0; i < 14; i += 0.5)
# d5.push([i, Math.sqrt(i)]);
#
# $.plot($("#placeholder"), [
# {
# data: d1,
# lines: { show: true, fill: true }
# },
# {
# data: d2,
# bars: { show: true }
# },
# {
# data: d3,
# points: { show: true }
# },
# {
# data: d4,
# lines: { show: true }
# },
# {
# data: d5,
# lines: { show: true },
# points: { show: true }
# }
# ]);
# });
# </script>
http://code.google.com/p/flot/
作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:https://jackxiang.com/post/2147/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!
评论列表