纯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学习笔记4 Eval函数
Jan 11 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
基于node实现websocket协议
Apr 25 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
JS实现横向轮播图(初级版)
Jun 24 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获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python3.7.0的安装步骤
2018/08/27 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
最新远光软件笔试题面试题内容
2013/11/08 面试题
学生生病请假条范文
2014/02/16 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
小学生环保倡议书
2014/05/15 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python