纯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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
vue.js中npm安装教程图解
Apr 10 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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实现修改新闻时删除图片的方法
2015/05/12 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
微信支付开发订单查询实例
2016/07/12 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
js原型继承的两种方法对比介绍
2014/03/30 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
Python语言快速上手学习方法
2018/12/14 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
共产党员公开承诺书
2014/03/25 职场文书
民主生活会汇报材料
2014/12/15 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python