绘制你的第一个图表(jquery-flot-line-chart)
事前准备
首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的有气温趋势图、 股票走势图等.
绘制
绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在<body>之间
<div id="flot-placeholder"></div>
再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生 "Uncaught Invalid dimensions for plot, width = 0, height = 0"的错误, 要特别注意!
#flot-placeholder{
width:350px;
height:300px;
}
接下来建立如下的数据数组组 变数data是数据源, 以指定x及y轴数据如[x, y], 变量dataset里是除了指定数据源外, 还指定了标签(label)名称, 若卷标名称有设定时, 图表右上方的图例才会显示.
var data = [
[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370],
[7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]
]; var dataset = [
{
label: "line1",
data: data
}
];
绘制图表时可以设定一些选项让图表看起来更完整
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
};
最后再呼叫plot函式后把图表绘制出来
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
呼叫plot函式需要带入3个参数
$.plot(placeholder, data, options)
1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度.
2. data : 数据数组组, 如上面所提过的数据.
3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等.
下面是基本折线图的完整程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#flot-placeholder{width:350px;height:300px;}
</style>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://www.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript">
var data = [[1, 130], [2, 40], [3, 80], [4, 160], [5, 159], [6, 370], [7, 330], [8, 350], [9, 370], [10, 400], [11, 330], [12, 350]]; var dataset = [{label: "line1",data: data}]; var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
}
}
}; $(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
</script>
</head>
<body>
<div id="flot-placeholder"></div>
</body>
</html>
jquery 绘图工具 flot 学习笔记
今天想做一个统计图表，像163博客的流量统计一样的，借助 flot 实现了，而且很简单。
| var options = { | |
| lines: { show: true }, | |
| points: { show: true }, | |
| xaxis: { tickDecimals: 0, tickSize: 1 } | |
| }; |
$.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 }
},
{
data: d6,
lines: { show: true, steps: true }
}
]);
$.plot($("#placeholder"), [{ label: "", data: vData}],
{
series: { lines: { show: true }, points: { show: true} },
xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 }, //指定固定的显示内容
yaxis: { ticks: 5, min: 0 } //在y轴方向显示5个刻度，此时显示内容由 flot 根据所给的数据自动判断
}
);
绘制你的第一个图表(jquery-flot-line-chart)的更多相关文章
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- jQuery.Flot开发手记
目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...
- jQuery 实现Bootstrap Chart 图表
很多时候我们制作报表的时候需要图表,如果你使用bootstrap开发你的网站,如果你需要使用图表,那么最简单的方法就是就是使用bootstrap 的chart.js来实现图表,下面介绍方法 1.引入c ...
- jquery.flot.js简介
JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...
- 使用Excel绘制F分布概率密度函数图表
使用Excel绘制F分布概率密度函数图表 利用Excel绘制t分布的概率密度函数的相同方式,可以绘制F分布的概率密度函数图表. F分布的概率密度函数如下图所示: 其中:μ为分子自由度,ν为分母自由度 ...
- ECharts学习总结(一):ECharts的第一个图表
在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...
- jQuery图表插件Flot中文文档
转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...
- JQuery flot API文档 中文版
调用plot函数的方法如下: var plot = $.plot(placeholder, data, options) 其 中placeholder可以是JQuery的对象,DOM元素或者JQuer ...
- jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
随机推荐
- Git补充命令行操作操作
Git命令行基本操作这里有我之前整理的git基本操作,常用的操作. 本文以实际功能和实例来说明git GUI的实现原理. 单独更新特定文件 $ git checkout readme.md 删除特定文 ...
- 安装C/C++交叉编译环境
转:http://blog.csdn.net/nokiaguy/article/details/8509739 X86架构的CPU采用的是复杂指令集(Complex Instruction Set C ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- C#学习笔记（26）——委托计算器
说明(2017-11-20 15:14:18): 1. 委托一直稀里糊涂的,有人说简单,有人说难,艹你们! 2. 其实主要是因为,平时不用委托也能解决大部分问题,所以都没有特意去用,网上也没有什么很好 ...
- 慢速HTTP拒接服务攻击（DoS）复现
kali linux下有个神奇的工具叫“slowhttptest” 命令:slowhttptest -c 1000 -H -g -o slowhttp -i 10 -r 200 -t GET -u h ...
- 随手记Swift基础和Optional Type（问号?和感叹号!）
距离Apple推出Swift已经有几天了,网上也时不时出现"急招Swift程序猿,要求有一天工作经验"的帖子. 看到Swift,除了苹果放的另外一门语言的链接(http://swi ...
- 【Android开源项目分析】自定义圆形头像CircleImageView的使用和源码分析
原文地址: http://blog.csdn.net/zhoubin1992/article/details/47258639 效果
- Unicode Character Set and UTF-8, UTF-16, UTF-32 Encoding
在计算机内存中,统一使用unicode编码,当需要保存到硬盘或者需要传输的时候,就转换为utf-8编码. 用记事本编辑的时候,从文件读取的utf-8字符被转换为unicode字符到内存里,编码完成保存 ...
- 区块链blockchina简述
区块链是比特币的底层技术和基础架构,本质上是一个去中心化的数据库.区块链是一串使用密码学方法相关联产生的数据块,每一个数据块中包含了一次比特币网络交易的信息,用于验证其信息的有效性(防伪)并生成下一个 ...
- Linux/Unix下的任务管理器-top命令
Windows下的任务管理器虽然不好用(个人更喜欢Process Explorer些),但也算方便,可以方便的查看进程,CPU,内存...也可以很容易的结束进程 没有图形化界面下的Linux,也有命令 ...