纯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 相关文章推荐
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
分享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数组
2010/11/01 PHP
php微信支付之APP支付方法
2015/03/04 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
列表内容的选择
2006/06/30 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
React简单介绍
2017/05/24 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
python安装Scrapy图文教程
2017/08/14 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
django 将model转换为字典的方法示例
2018/10/16 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
港湾网络笔试题
2014/04/19 面试题
少先队学雷锋活动总结范文
2014/03/09 职场文书
党员承诺书范文
2014/05/19 职场文书
大足石刻导游词
2015/02/02 职场文书
前台岗位职责范本
2015/04/16 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书