绘制Flot图表前, 你必须先指定一个定位点(Placeholder), 这个定位点将会是Flot绘制图表的地方, 你可以把它放置在任何你想放的地方, 定位点如下, 放在<body>之间
再来用CSS给与定位点宽度与长度, 如果没有指定定位点长与宽, 就会发生
"Uncaught Invalid dimensions for plot, width = 0, height = 0"的错误, 要特别注意!
接下来建立如下的数据数组组 变数data是数据源, 以指定x及y轴数据如[x, y], 变量dataset里是除了指定数据源外, 还指定了标签(label)名称, 若卷标名称有设定时, 图表右上方的图例才会显示.
绘制图表时可以设定一些选项让图表看起来更完整
最后再呼叫plot函式后把图表绘制出来
呼叫plot函式需要带入3个参数
$.plot(placeholder, data, options)
1. placeholder : 是一个DOM元素, Flot会把图表插到这个元素之中, 这个元素必须要有指定宽度和高度.
2. data : 数据数组组, 如上面所提过的数据.
3. options : 在选项里可以设定Flot提供的属性, 或是改变Flot的外观、决定绘制何种图形等.
1
|
<
div
id
=
"flot-placeholder"
></
div
>
|
1
2
3
4
|
#flot-placeholder{
width
:
350px
;
height
:
300px
;
}
|
1
2
3
4
5
6
7
8
9
10
11
|
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
}
];
|
1
2
3
4
5
6
7
8
9
|
var
options = {
series: {
lines: { show:
true
},
points: {
radius: 3,
show:
true
}
}
};
|
1
2
3
|
$(document).ready(
function
() {
$.plot($(
"#flot-placeholder"
), dataset, options);
});
|
$.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
>