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
分享到:
相关推荐
前端图表 柱状图 饼图 雷达图 可以良好的用于web端图形、图标展示,只需简单设置属性参数
基于jquery的图表插件, highChart,jschart,flot
整合bootstrap和mybatis,使用highchart.js模板自己修改后展示图形,上传和下载文件demo
众所周知,通过jquery可以实现很好的图表效果,...其次,这里提供常用的插件如highchart,这里提供有详细的API文档和示例,不用再去官网上搜集啦。 另外,还有jschart和flot,虽然不常用,但是可以作为学习参考使用。
highcharts报表多种多样,引入js,官方文档还是比较齐全,实现还是比较轻松的, api: https://api.highcharts.com.cn/highcharts
这是highchart3d最新,最齐全的,里面有很多案例可供练习
HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以转换为一张图片导出。压缩包里是案例代码。HighChart生成的前端多张svg图表数据,可以...
基于html开发的组织架构图,引用highchart组织图,下载后,直接运行可以查看效果,用于备份。
Use the highcharts foreground frame to draw a graph and display icons at each point of the curve. Effect such as weather forecast chart.
含HighCharts.js文档,可用于引用设计折线图、柱状图、饼图等
highchart折线图,y轴双数据 代码详细注释,使用方便,可直接调用,可灵活布局 欢迎提出宝贵意见https://blog.csdn.net/weixin_43151418
highchart
highcharts-zh_CN.js 中文格式化用,对highChart图标框架进行中文格式化。
一个比较全的highchart工具包.里边包含了各种例子
extjs chart highchart hede hodo
highchart
js javascript 柱状图 饼状图 K线图 JavaScript实现的柱状图、饼状图、炒股的K线图、完全免费。里面有丰富的例子,感觉蛮好的,希望给大家带来帮助
入门 git clone git@github.com:rmcvey/highchart-server.gitnpm installnode server.js用法服务器在端口 3004 上运行,欢迎您将其更改为您喜欢的任何内容。 图表在服务器上生成,并直接从端点请求作为 png 文件提供...
Highcharts开源的JS图表控件简介:制作图表的纯Js控件,Highcharts v2.2.0主要特性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等;对个人用户完全免费;纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图...
highchart中文帮助文档