`
ti8989
  • 浏览: 26301 次
文章分类
社区版块
存档分类
最新评论

HTML5图表制作组件Flotr2

阅读更多
转自给力技术

  Flotr2 是一个用于绘制基于 HTML5 的图形和图表的开源 JavaScript 类库,是图表组件 flotr 的分支,但移除了 Prototype 框架的依赖并在其它功能上有很大的改进。
  Flotr2 支持常见的线性图、柱状图、饼图等多种图表类型。它的定制性也非常高,支持自定义标题、子标题、颜色等等。它对浏览器的兼容性也相当不错,支持包括 IE6 在内的大部分主流浏览器。
如何使用

  首先引入 Flotr2 类库

<script type="text/javascript" src="flotr2.min.js"></script>

  添加用于呈现图表的 DIV 层

<div id="container"></div>

  绘制图表

Flotr.draw(container, data, options)

查看演示
分享到:
评论

相关推荐

    flotr2实例+文档

    Flotr2是一款强大的JavaScript图表库,它基于HTML5的Canvas元素构建,用于在网页上创建交互式的、高质量的图表。这个资源包“flotr2实例+文档”包含了Flotr2库的完整源代码以及相关实例和文档,对于学习和使用Flotr2...

    flotr2 js图表控件

    Flotr2 是一个用于绘制 HTML5 图形和图表的开源 JS 库,是 flotr 的分支,但移除了 Prototype 的依赖以及其他方面很多改进。

    flotr2绘图工具

    3. **交互性**:Flotr2的图表是交互式的,用户可以通过鼠标悬停查看数据点的具体值,点击选择数据点,甚至可以通过拖动来平移或缩放图表。 4. **自定义**:Flotr2允许开发者自定义图表的各个方面,包括颜色、字体、...

    flotr2 绘图示例

    Flotr2是一款强大的JavaScript绘图库,用于在网页上创建各种类型的图表,如折线图、柱状图、散点图等。它以其简洁的API和良好的交互性著称,适用于那些希望在网页中集成高质量图形的开发者。Flotr2在不同的浏览器中...

    Flotr2开发库

    Flotr2是一个强大的JavaScript图表库,专为Web开发者设计,用于在网页上创建美观且功能丰富的图表。这个库是基于Flot的升级版,提供了一系列改进和新特性,使其成为数据可视化的优秀选择。Flotr2的核心优势在于其...

    flotr2.min.js 包 及简单例子

    5. **操作DOM元素**:Flotr2通常需要一个`canvas`元素作为绘图的目标,确保在HTML中正确设置了这个元素。 6. **响应式设计**:如果需要,可以利用Flotr2的重绘功能来适应窗口大小变化或其他动态更新。 7. **事件...

    android 调用js flotr2曲线图

    在Android应用中,我们通常会结合WebView组件来加载和执行Flotr2的JavaScript代码,从而在Android界面上渲染图表。 1. **集成Flotr2到Android项目**: - 首先,需要将Flotr2的JavaScript文件添加到项目的assets或...

    Flotr2图形插件

    使用Flotr2绘制图表非常简单,首先需要在HTML文件中引入Flotr2的JavaScript和CSS文件,然后创建一个用于显示图表的canvas元素。接下来,你可以通过JavaScript代码创建图表对象,并传递数据和配置选项。 2. **柱状...

    Flotr2.zip

    一个JavaScript绘图和制表的图形类库,可以有效地帮助你绘制基于HTML5的图表和图形,包括线图、柱状图、饼图、气泡图等等,对于浏览器的兼容性也不错。压缩包包含一份Flotr2.js和它的压缩版本Flotr2.min.js。可以...

    Flotr2-master.zip

    Flotr2 是一个用于绘制 HTML5 图形和图表的开源 JS 库,是 flotr 的分支,但移除了 Prototype 的依赖以及其他方面很多改进

    android和各种图表的数据交互

    demo展示了android如何使用各种图表,其中包括折线图和饼图,图表类型有 echarts flotr2 highcharts jqplot四种,其中highcharts是收费的,echarts视频效果最棒,不过可能手机型号不同会出现些异常,比如背景变黑

    flotr 0.2 Prototype 曲线图插件.zip

    2. `flotr.css`: CSS样式文件,用于定义图形的样式和布局。 3. `demo.html` 或 `example.html`: 示例文件,展示了如何在HTML页面中使用Flotr创建曲线图。 4. `images/`: 图片目录,可能包含用于图形元素的图标或背景...

    各种前端图表软件.rar

    rar中包含7种chart的图表,供大家集中对比使用。满足日常开发需要 有amcharts_3.21.14、canvasjs-2.3.1、Chartkick_v2.2.3 ...、EJSCharts-master、Flotr2-master、FusionCharts3.2.1、EJSCharts-master 欢迎使用

    Web Chart 极品web报表控件收集Web+Chart

    FusionCharts - FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。 ? JFreeChart -...

    JavaScript数据可视化编程Flotr

    flotr ,资源分 原本想设置0的,可是不知为何最小是1分,难道改革了么, /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结 /小纠结

    js绘图工具之二 jqflot

    2. 创建一个HTML元素作为图表容器。 3. 调用`$.jqplot`函数,传入数据和配置选项。 ```javascript $(document).ready(function () { var plot1 = $.jqplot('chartElement', data, options); }); ``` 其中,`'...

    Chart 极品web报表控件收集(Flot,AmCharts, Emprise JavaScript Charts...)

    • FusionCharts - FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。 • ...

    Javascript实现的UI图形包Flotr

    Flotr,http://solutoire.com/flotr/ 一个基于Canvas的Javascript图形包, 兼容IE8+,Google Chrome,Firefox。 可实现类似Windows资源显示器的cpu,memory类动态资源图,包括Line, Pie, Bar chart等。

    大数据量科学计算数据的动态Web可视化.pdf

    比较优秀的JavaScript图表工具有Flotr JavaScript Plotting Library(Flotr)、Empriese JavaScript Charts(EJSChart)等。利用这些框架可以用很简单的语法实现美观的图表,支持大多数浏览器,并且具有丰富的图表...

    JQuery Plotter图表类库 v1.5源码2012519

    JQuery Plotter图表类库 v1.5源码 源码描述 现在网络上有大量的Javascript图表类库。 本源码在演示如何整合Javascript图表类库在ASP.NET(Adam.JSGenerator),如何建立客户图表取决于您的需要。 已经修正之前版本中...

Global site tag (gtag.js) - Google Analytics