当前位置: 代码迷 >> Web前端 >> Highcharts:十分漂亮的图表API
  详细解决方案

Highcharts:十分漂亮的图表API

热度:789   发布时间:2012-08-16 12:02:16.0
Highcharts:非常漂亮的图表API

Highcharts:非常漂亮的图表API

2009-12-07 11:30 by 副主编 zly06 评论(47) 有38153人浏览 收藏
JavaScript 浏览器 Java
< > 猎头职位: 北京: 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