纯JAVASCRIPT图表动画插件Highcharts Examples


Posted in Javascript onApril 16, 2011

What is Highcharts? 下载地址 https://3water.com/jiaoben/24363.html
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
Features
纯JAVASCRIPT图表动画插件Highcharts Examples
Compatible
It works in all modern browsers including the iPhone/iPad and Internet Explorer from version 6. Standard browsers use SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
纯JAVASCRIPT图表动画插件Highcharts Examples
Free for Non-commercial
.
纯JAVASCRIPT图表动画插件Highcharts Examples
Pure JavaScript
Highcharts is solely based on native browser technologies and doesn't require client side plugins like Flash or Java. Furthermore you don't need to install anything on your server. No PHP or ASP.NET. Highcharts needs only two JS files to run: The highcharts.js core and either the jQuery or the MooTools framework. One of these frameworks is most likely already in use in your web page.
纯JAVASCRIPT图表动画插件Highcharts Examples
Numerous Chart Types
Highcharts supports line, spline, area, areaspline, column, bar, pie and scatter chart types. Any of these can be combined in one chart.
纯JAVASCRIPT图表动画插件Highcharts Examples
Simple Configuration Syntax
Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.
纯JAVASCRIPT图表动画插件Highcharts Examples
Dynamic
Through a full API you can add, remove and modify series, axes or points at any time after chart creation. Numerous events supply hooks for programming agains the chart. In combination with jQuery's or MooTools' Ajax API, this opens for solutions like live charts constantly updating with values from the server, user supplied data and more.
纯JAVASCRIPT图表动画插件Highcharts Examples
Multiple Axes
Sometimes you want to compare variables that are not the same scale - for example temperature versus rainfall and air pressure. Highcharts lets you assign an y axis for each series - or an x axis if you want to compare data sets of different categories. Each axis can be placed to the right or left, top or bottom of the chart. All options can be set individually, including reversing, styling and position.
纯JAVASCRIPT图表动画插件Highcharts Examples
Tooltip Labels
On hovering the chart Highcharts can display a tooltip text with information on each point and series. The tooltip follows as the user moves the mouse over the graph, and great efforts have been taken to make it stick to the nearest point as well as making it easy to read a point that is below another point.
纯JAVASCRIPT图表动画插件Highcharts Examples
Datetime Axis
75% of all charts with an X and Y axis have a date-time X axis. Therefore Highchart is very intelligent about time values. With milliseconds axis units, Highcharts determines where to place the ticks so that they always mark the start of the month or the week, midnight and midday, the full hour etc.
纯JAVASCRIPT图表动画插件Highcharts Examples
Export and print
With the exporting module enabled, your users can export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.
纯JAVASCRIPT图表动画插件Highcharts Examples
Zooming
By zooming in on a chart you can examine an especially interesting part of the data more closely. Zooming can be in the X or Y dimension, or both.
纯JAVASCRIPT图表动画插件Highcharts Examples
External Data Loading
Highcharts takes the data in a JavaScript array, which can be defined in the local configuration object, in a separate file or even on a different site. Furthermore, the data can be handled over to Highcharts in any form, and a callback function used to parse the data into an array.
纯JAVASCRIPT图表动画插件Highcharts Examples
Inverted Chart or Reversed Axis
Sometimes you need to flip over your chart and make the X axis appear vertical, like for example in a bar chart. Reversing the axis, with the highest values appearing closest to origo, is also supported.
纯JAVASCRIPT图表动画插件Highcharts Examples
Text Rotation for Labels

Do you want to use Highcharts for a personal website, a school site or a non-profit organisation? Then you don't need the author's permission, just go on and use Highcharts. For commercial websites and projects, see License and Pricing All text labels, including axis labels, data labels for the point and axis titles, can be rotated in any angle.

Javascript 相关文章推荐
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 #Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 #Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 #Javascript
jquery下jstree简单应用 - v1.0
Apr 14 #Javascript
JQuery之拖拽插件实现代码
Apr 14 #Javascript
jQuery创建插件的代码分析
Apr 14 #Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python实现简单图书管理系统
2019/11/22 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
董事长岗位职责
2013/11/30 职场文书
现金会计岗位职责
2013/12/05 职场文书
车间机修工岗位职责
2014/02/28 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript