In previous projects at MailChannels
I have used Flot.js
for graphing. There were many reasons I chose this originally. The
graphs are interactive and can be manipulated within the browser without
having to communicate back to the server. You can retrieve additional
data from the server which enables you to be able to scan left and right
on graph. You can animate transitions, zoom in and out, get the values
at precise points on the graph and select an area data. When I found
Flot.js I was mainly looking for something that was not ugly. I was
using Perl on the server side, and Perl has a history of having ugly
graphing solutions. I’ve since found some alternatives on the Perl side,
but for me Flot.js was the new hotness at that time. You can read my
presentation on Graphs In Perl and Flot.js
over at slideshare.
So Flot.js is pretty cool, but what are it’s limitations? The number
one limitation is the ability to render a graph anywhere other than
within the browser. Since JavaScript is creating the graph it’s hard to
automate emailing a static PNG/JPG/GIF image of the graph from the
server without firing up a browser and then taking a snapshot.
Enter Highchart.
Example of Highchart graphs
I discovered Highchart recently while working with netSIGN
.
We were looking at graphing options in Ruby On Rails and came across
Highchart. It’s much like Flot.js, but it is a commercial venture.
Flot.js is free; released under the MIT license and is sponsored by IOLA
in Denmark. Developers on a shoe-string are unlikely to look at
Highchart, just because of price tag, but for most projects I think the
price it reasonable. What do you get for your money?
Documentation
Highchart feels more polished than Flot.js and many of the standard
features, simply work out of the box. Flots basic chart is very basic
and you have to pass all the options to get something that starts to
look nice. Maybe you prefer that though. Finding those options is so
much nicer with Highcharts’ Options Reference
.
It’s easy to drill down and see exactly how the options piece together
through the hierarchical menu. I do not want to knock Flot.js, since it
does have documentation, but it is written more like a novel than the
reference document and referring to it is time consuming.
Rendering Offline
“Wow!”, was all I could think when I saw that Highchart can actually
render the graphs on the server as PNG files. Ok, it’s not a perfect
solution and still requires a web-browser, but as long the user is
viewing the graph, a copy of the graph can be sent to the server for
generation as a PNG or other file format.
How does it do it? The JavaScript in the browser generates SVG, which
the browser can render visually. Highchart simply passes that generated
SVG back, from the browser, to the server. The server then takes the
SVG file and passes it to SVG Rasterizer
, which is an Apache Project. It’s a Java program that can be called to follows
java -jar batik-rasterizer.jar graph.svg
Limitations
The main limitation with both Flot.js and Highchart is that of
generating offline reports. Even though Highchart gets further down the
road, it cannot be done without first rendering the graph in the
browser. I have not investigated, but I have a feeling that you could do
this if you have a server that can run JavaScript code
, such as node.js
.
Conclusion
Yes, there is a cost, but I think it’s worth going with Highchart.
Flot.js has not evolved much in the time I’ve known it and I think
Highchart is a more mature product and is quicker to get up and running
with. If you are a commercial venture (Highchart is free for
non-commercial) and you do not want to spend a penny then Flot.js is
still a great solution and I would not dissuade anyone from using it.
from: http://www.bigfastblog.com/highchart-vs-flot-js-comparing-javascript-graphing-engines
分享到:
相关推荐
2. **数据传递**:将Qt应用中的数据通过JavaScript接口传递到`Chart.js`,可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**:...
前端图表 柱状图 饼图 雷达图 可以良好的用于web端图形、图标展示,只需简单设置属性参数
这个"highchart7.2.0.zip"压缩包很可能是包含了Highcharts的7.2.0版本的所有资源,包括JavaScript库文件、示例代码、文档等。下面我们将详细探讨Highcharts及其在7.2.0版本中的关键特性、用法和API。 首先,...
Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如柱状图、折线图、饼图以及复杂的数据可视化图表,包括我们这里的组织架构图。在这个"highchart组织架构图.zip"压缩包中,包含...
在jQuery生态系统中,有多个图表插件可供选择,例如Highcharts、jsCharts和Flot。这三个插件都是JavaScript库,专门设计用于创建各种类型的图表,如柱状图、折线图、饼图等。 **Highcharts** Highcharts是一款功能...
Highcharts 是一款强大的JavaScript图表库,它允许开发者创建各种类型的互动图表,如柱状图、折线图、饼图等。3D版本的Highcharts(Highcharts 3D)则是这个库的一个扩展,为用户提供了在Web应用中展示立体、三维...
在本项目中,"bootstrap+upload(download)File+mybatis+highchart.js"是一个综合性的应用,它结合了前端框架Bootstrap、数据持久化框架MyBatis、数据可视化库Highcharts.js以及文件上传下载功能。下面将详细介绍这些...
众所周知,通过jquery可以实现很好的图表效果,...其次,这里提供常用的插件如highchart,这里提供有详细的API文档和示例,不用再去官网上搜集啦。 另外,还有jschart和flot,虽然不常用,但是可以作为学习参考使用。
首先,`HighCharts.js`是HighCharts的核心JavaScript文件,通过引入这个文件,可以在网页中使用HighCharts。在HTML文件(如`index.htm`)中,你需要在`<head>`部分引入`HighCharts.js`,通常使用`<script>`标签来...
Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种数据可视化效果,如柱状图、曲线图、饼图等。这个压缩包包含的是Highcharts的JavaScript文件,这些文件是生成图表所必需的。 首先,Highcharts的...
Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括折线图、柱状图、饼图等。在这个名为"highchart.rar"的压缩包中,我们很显然会找到与Highcharts相关的代码示例,尤其是关于如何...
HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以...
Use the highcharts foreground frame to draw a graph and display icons at each point of the curve. Effect such as weather forecast chart.
HighChart是一个强大的JavaScript库,用于构建高质量的网页图表,其在数据可视化方面表现卓越,尤其适用于网络应用。 首先,我们需要了解MATLAB的Web浏览器功能。MATLAB内置的Web浏览器组件允许开发者在MATLAB环境...
在IT行业中,ExtJS、Highcharts和JavaScript是创建交互式数据可视化的重要工具。本文将深入探讨这些技术,以及它们在实际应用中的结合。 首先,ExtJS是一个基于JavaScript的开源框架,用于构建富客户端Web应用程序...
在"Highchart Demo"这个实例中,我们将深入探讨如何利用Highcharts来制作各种类型的图表,以及相关的JavaScript配置和数据接收格式。 首先,Highcharts支持多种图表类型,如折线图、柱状图、饼图、散点图、面积图等...
HighChart是一款强大的JavaScript图表库,用于在Web页面上创建各种互动式图表,包括曲线图。在Web开发中,数据可视化是至关重要的,HighChart凭借其丰富的功能和易用性,深受开发者喜爱。以下是对"HighChart曲线图...
HighChart基于JavaScript,支持各种浏览器,包括IE9及以上的版本。它以其灵活性、丰富的图表类型和良好的性能赢得了开发者们的青睐。在网页应用中,HighChart能够帮助我们有效地展示复杂的数据,提升用户体验。 ...
Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。它具有丰富的定制选项,能够满足开发者在数据展示方面的各种需求。以下是对Highcharts的一些关键知识...
HighChart API 是一款强大的JavaScript图表库,用于在Web页面上创建动态、交互式的图表和图形。这个API提供了丰富的选项和功能,使得开发者可以定制各种类型的图表,如柱状图、折线图、饼图、散点图等。下面将详细...