资讯频道 → Web前端
阅读更多

111顶
6踩

Web前端

原创新闻 Highcharts:非常漂亮的图表API

2009-12-07 11:30 by 副主编 zly06 评论(51) 有105738人浏览
JavaScript 浏览器 Java

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

  • 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
  • 对个人用户完全免费；
  • 纯JS，无BS；
  • 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
  • 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
  • 提示功能：鼠标移动到图表的某一点上有提示信息；
  • 放大功能：选中图表部分放大，近距离观察图表；
  • 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
  • 时间轴：可以精确到毫秒；
  • ……

代码示例:

  1. var chart1 = new Highcharts.Chart({
  2.          chart: {
  3.             renderTo: 'chart-container-1',
  4.             defaultSeriesType: 'bar'
  5.          },
  6.          title: {
  7.             text: 'Fruit Consumption'
  8.          },
  9.          xAxis: {
  10.             categories: ['Apples', 'Bananas', 'Oranges]
  11.          },
  12.          yAxis: {
  13.             title: {
  14.                text: 'Fruit eaten'
  15.             }
  16.          },
  17.          series: [{
  18.             name: 'Jane',
  19.             data: [1, 0, 4]
  20.          }, {
  21.             name: 'John',
  22.             data: [5, 7, 3]
  23.          }]
  24.       });

 

Highcharts主页:http://www.highcharts.com/

 

Highcharts下载:http://www.highcharts.com/downloads/zips/Highcharts.zip

  • 大小: 24.6 KB
来自: ajaxian
111
顶
6
踩
评论 共 51 条 请登录后发表评论
31 楼 mccxj 2009-12-08 21:47
自己也做过图形报表相关的工作，就此对图形报表发表一点自己的想法：
1.图形报表非常醒目
图形报表是一种富格式，粗粒度的报表表现方式。表格样式的报表容纳的信息比较细，没法像图形那样直观。在一些不需要非常详细统计的情况下，图形报表的优势是非常明显的。在业务系统中融合图形报表，几乎就变成了一个必备需求。一个普遍的可以想象的场景是，能够简单明了的展现统计信息趋势等，又能在必要的时候得到详细的统计数据，这就使得系统拥有混合多种报表表现形式的能力。
2.服务端与客户端的图形报表
我认为图形报表可以分成两部分，数据和渲染引擎。渲染引擎就主要是提供接口接受数据并把数据显示出来，或许还提供了一些接口让用户参与交互。现在这个引擎的实现方式可谓多种多样，有些是语言相关的，例如birt，jreport等，他们大体上是通过数据源定制描述文件(例如通用的xml格式)，然后自己解析并展现。这种方式的通用性不是很强，因为他比较依赖于服务端环境，就是说你必须要在添加一套组件，多跑一套应用才能使用。另外还有一些是基于客户端技术的，例如flash，css/js等，对于服务端来说只要提供数据就可以了，非常方便。因为这个原因，我更加推荐使用客户端技术。
3.flash图形报表的可用性
看了一些基于客户端的实现方式，个人是比较赞赏flash实现方式的。我是看重flash表现力非常强大，组件化，不懂flash也可以轻松弄出非常漂亮的报表。如果要推荐一个的话，我觉得基于flash技术的FusionChart可以满足绝大多数的需求。像什么直线图，曲线图、区域图、区域曲线图、柱状图、饼图都可以轻松实现。如果使用收费版本的话还有更加强大的功能(当然你也可以选择在网上找破解版)，这类工具还可以轻松打印，提供多种格式转换，还可以动态改变报表。这样你就发挥你的创造力了，例如配合ajax来展示个股分时图等等。
4.集成不是个问题
接上面的flash报表的话题。如果我们选择flash报表的话，我们可以预见的是，它本身就提供了一套适用性非常强的接口。再加上这本来就是服务端语言无关的实现方式，从我的工作经验上看，单单这点不会是什么难题的。我觉得flash报表能解决90%的问题，但是如何补充flash报表在功能上的缺陷? 这才是我们要考虑的问题吧。我的想法是，一套flash报表不行，我用多一套其他的总可以了吧？现在服务端主要的功能是提供数据，而客户端做的是接受数据并展示。如果使用多套客户端技术的话，那么服务端的数据再经过一套适配器转换即可。管你使用的是flash，还是css/js，你只要定义数据适配器即可。虽然现在这些只是一些想法，而FusionChart也的确是满足了我所有的需求，但是我还是觉得这是完全可行的。
30 楼 coreymylife 2009-12-08 21:09
要收费~？
29 楼 langhua9527 2009-12-08 20:43
我的神啊。。。。
28 楼 fanth 2009-12-08 15:23
不错，研究一下。
27 楼 whaosoft 2009-12-08 14:38
看了一下 功能挺全的
26 楼 rjzou2006 2009-12-08 13:27
•支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
------------
有没有比这些更强大点,现在我很需要再强大的图表.
25 楼 lxiaodao 2009-12-08 12:57
兼容当今所有的浏览器，包括iPhone、IE和火狐等等?????????
我下载了，根本就看到效果,在火狐里面看了有不少js错误。
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.15) Gecko/2009101601 Firefox/3.0.15
24 楼 thebye85 2009-12-08 12:34
很漂亮，不错
23 楼 xiruibing 2009-12-08 12:34
  好漂亮啊
22 楼 fudeling 2009-12-08 12:17
太漂亮了.帅
21 楼 youjianbo_han_87 2009-12-08 11:39
不错，这样
20 楼 damoqiongqiu 2009-12-08 11:16
难得一个纯的js页面绘图库，顶！
19 楼 chump.lee 2009-12-08 09:59
还要收费，cao，还是flex好呀
18 楼 he_lux 2009-12-08 09:48
dzt 写道
amcharts 是个不错的选择

amcharts是要收费的好不好?
17 楼 huanggang212 2009-12-08 09:29
看上去还不错哦
16 楼 hankesi2000 2009-12-08 09:24
对个人用户完全免费？发布出来是不是就要收费了？
15 楼 dzt 2009-12-08 09:23
amcharts 是个不错的选择
14 楼 springhill 2009-12-08 09:15
官方网站的例子都报错，out of memory at line8，中间那幅，所以谁敢用
13 楼 JackAndroid 2009-12-08 08:34
很漂亮嘛，不错不错
12 楼 花花公子 2009-12-07 22:13
看了一下，好像用的是image map，太古老了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Usenet新闻组的设置和使用

    Usenet新闻组的设置和使用，详细的介绍，下载，安装，使用

  • 微视视频搜索数据接口

    微视视频搜索数据接口

  • 用文本分析算法探索20个新闻组数据集

    什么是NLP 20个新闻组数据集，顾名思义，由从新闻文章抽取的文本组成。它是由Ken Lang采集的，广泛用于机器学习技术驱动的文本类应用的实验，尤其是用自然语言处理技术开发文本类应用。 自然语言处理（Natural Language Processing，NLP）是机器学习的一个重要领域，它研究机器（计算机）和人类（自然）语言之间的交互。自然语言不局限于演讲和对话，它们也可以是书面语或符号语言。NLP任务所用的数据形式多样，有社交媒体、网页、医学处方的文本、音频邮件、控制系统的命令，甚至是我们最喜欢的

  • 国内唯一幸存的新闻组，技术爱好者的天堂（万千的朋友请进）

    以前万千的朋友找到新家了吗？不管你是没用过新闻组，还是没有找到这里的老朋友，都请进来看看吧－－61.156.20.89（注：用Outlook或者Agent下载帖子，详细教程可以到http://laocui2000.myetang.com/看到）//下面是已经有了的话题分组，如果没有你喜欢的话题，还可以来找管理员增加本站站务.公告: 计算机.软件.编程:计算机.软件.编程.C语言:计算机

  • 新闻组地址

    新帆新闻组 news://news.newsfan.net 宁波新闻组 news://news.cnnb.net 微软新闻组 news://msnews.microsoft.com 幽谷新闻组 news://hermitage.vicp.net 五记茶馆   news://cmk-gbm.vicp.net 万千新闻组 news://news.webking.cn 希网新闻组 news://news

  • 欢迎来到新闻组

    朋友，欢迎来到新闻组！ 　　富于活力和探索精神的你，将会接触到一个新的、充满神奇魅力的世界！ 　　这东西就隐藏在网络的某个地方，我们将带你找到它。 　　来，请点击一下这个链接看看（或者将这个网址复制到IE地址栏再敲回车） 　　news://msnews.micorsoft.com/microsoft.public.cn.windowsxp，这就是著名的微软公司的新闻组。 　...

  • 全球排名前500的网站都是做什么的

    数据来自Alexa权威2016-3-3 Google.com Enables users to search the world's information, including webpages, images, and videos. Offers…More 2 Facebook.com A social utility that connects people, to ke

  • HTML5(六)preserve and recover

    HTML5(六)preserve and recover 1. save the state of canvas context 2. So we have two method to save and restore the state of Context save() restore() it works like stack. 3. magic change ...

  • sql练习----mysql多表查询（内连接、外连接、group by分组）练习

    做了一些sql的练习，记录一下 建表的sql语句 /* Navicat MySQL Data Transfer Source Server : mysql Source Server Version : 50713 Source Host : localhost:3306 Source Database : xx Target Server Ty...

  • 【转】几个新闻组服务器地址

    新闻组有点像BBS，但比BBS优越得多。现在介绍一下它的用法。　　一、什么是新闻组　　 新闻组(英文名Usenet或NewsGroup)，简单地说就是一个基于网络的计算机组合，这些计算机被称为新闻服务器，不同的用户通过一些软件可连接到新闻服务器上，阅读其他人的消息并可以参与讨论。新闻组是一个完全交互式的超级电子论坛，是任何一个网络用户都能进行相互交流的工具。 　　二、新闻组的优点　　 新闻组和...

  • 我常上的几个新闻组服务器

    news://news.newsfan.net（国内）news://webking.online.jn.sd.cn（国内）news://news.yaako.com(国内唯一一个与国外服务器交换的新闻组服务器)news://dp-news.maxwell.syr.edu(国外的服务器，内容最全，人气最旺)

  • Tons of e-book sites!TONS

    1-http://campus.en.kku.ac.th/~pongsakorn/download/e-book/java (three java e-books) 2-http://www.bjnet.edu.cn/tech/book/ (JavaScript, Perl, CGI) 3-http://bookshelf.sleepnet.net/files/ (Nothing of value

  • Flex 加载Base64编码的二进制字符串图片

    http://www.adobe.com/2006/mxml"         layout="vertical"         verticalAlign="middle"         backgroundColor="white"         creationComplete="init();">                           import mx.utils

  • 面向对象-选课系统

    作业要求选课系统管理员： 创建老师：姓名、性别、年龄、资产 创建课程：课程名称、上课时间、课时费、关联老师、---课程内容 学生： 用户名、密码、性别、年龄、选课列表[]、上课记录{课程1：[di,a,]} 上课记录{课程名称:[上课时间、上课教师]} 教师： 评价信息{学生姓名：[评价时间，评价内容]}1. 管理员设置课程信息和老师信息 2. 老师上课获得课

  • Spring框架简单应用——增删改查

    Spring Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性角度而言，绝大部分Java应用都可以从Spring中受益。 目的：解决企业应用开发的复杂性 功能：使用基本的JavaBean代替EJB，并提供了更多的企业应用功能 范围：任何Jav...

  • 第十七章、区网控制者： Proxy 服务器

    代理服务器的功能是可以代理局域网络的个人计算机来向因特网取得网页或其他数据的一种服务， 由于代理取得的数据可以保存一份在服务器的快取上，因此以往有类似『假象加速』的功能！不过，目前网络带宽已经比以前好很多， 因此代理服务器倒是很少使用在这方面。取而代之的是局域网络『高阶防火墙』的角色！这里的『高阶』指的是 OSI 七层协议里面的高层，因为代理服务器是用在应用层上的一种防火墙方式啦！不像 iptab

  • Python网络爬虫实战：世纪佳缘爬取近6万条小姐姐数据后发现惊天秘密

    翻着安静到死寂的聊天列表，我忽然惊醒，不行，我们不能这样下去，光羡慕别人有什么用，我们要行动起来，去找自己的幸福！！！ 我也想“谈不分手的恋爱” ！！！内牛满面！！！ 注册登陆一气呵成~ 筛选条件，嗯…性别女，年龄…18到24岁，身高嘛，无所谓啦，就按默认155-170吧，地区…嗯北京好，北京近一点，照片？那肯定要啊，必须的！！！ 小姐姐们我来了~ 哇，好多小姐姐啊，到底该选哪个搭讪啊… 这时候就该我们的爬虫出场了 爬虫部分 爬虫部分还是我们之前的四步：分析目标网页，获取网页内容，提取关键信息，输出

  • 使用Usenet（新闻组）的十大理由

    使用Usenet（新闻组）的十大理由1. 全球统一的分类。Usenet（新闻组）上有多达几万个不同类别的组，而且有着严格统一的管理，更重要的是它是按分级原理组织命名的，有着清楚的脉络可寻。组是Usenet（新闻组）的单位，服务器是居于次要地位的（当然，前提是你总得用一台服务器^_^）。在Usenet（新闻组）中有着数不清的服务器，来自全世界的Usenet用户们不管你连接哪台Usenet（新闻组

Global site tag (gtag.js) - Google Analytics