您的位置：首页 > Web前端 > JQuery

jQuery Flot 绘制简单折线图

2016-05-25 09:46 309 查看

绘制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的外观、决定绘制何种图形等.

下面是基本折线图的完整程序代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航