HighCharts理解与总结
摘自：http://www.highcharts.com/docs/getting-started/installation
Installation
Highcharts requires two files to run, highcharts.js and either jQuery, MooTools or Prototype or our own Highcharts Standalone Framework which are used for some common JavaScript tasks. If you're installing Highstock, the procedure is the same as below, except the JavaScript file name is highstock.js rather than highcharts.js.
A. Include Highcharts and framework
Include the JavaScript files in the <head> section of your web page as shown below.
Option #1: use jQuery
Use this code to include Highcharts with jQuery:
22 AUGUST 2013
Your first chart
With Highcharts included in your webpage you are ready to create your first chart.
We will start off by creating a simple bar chart.
- Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your chart.
<div id="container" style="width:100%; height:400px;"></div>
- A chart is initialized by adding the JavaScript tag, <script> </script>, anywhere in a webpage, containing the following code for jQuery. The div from #1 is referenced in the jQuery object.
$(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); });
The code above uses the jQuery specific way of launching code on document ready, as explained at the jQuery website. If you use MooTools or Prototype, instead of the $(function () syntax you do it slightly differently. Also, Highcharts isn't registered as a plugin in these frameworks, so you need to use the Highcharts.Chartconstructor and define the chart.renderTo option.
MooTools
window.addEvent('domready', function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' ... });
Prototype
document.observe("dom:loaded", function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' ... });
If you are inserting a Stock chart, there is a separate constructor method called Highcharts.StockChart. In these charts, typically the data is supplied in a separate JavaScript array, either taken from a separate JavaScript file or by an Ajax call to the server.
var chart1; // globally available $(function() { chart1 = new Highcharts.StockChart({ chart: { renderTo: 'container' }, rangeSelector: { selected: 1 }, series: [{ name: 'USD to EUR', data: usdtoeur // predefined JavaScript array }] }); });
- You should now see this chart on your webpage:
- Optionally, you can apply a global theme to your charts. A theme is just a set of options that are applied globally through the Highcharts.setOptions method. The download package comes with four predefined themes. To apply a theme from one of these files, add this directly after the highcharts.js file inclusion:
<script type="text/javascript" src="/js/themes/gray.js"></script>
For more details on how the options or settings in Highcharts work see How to set options.
Below is a list of online examples of the examples shown in this article:
- Simple bar chart (jQuery)
- Simple bar chart (MooTools)
- Simple bar chart (Prototype)
- Highstock Example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>
Option #2: use Highcharts Standalone Framework
jQuery is currently used in most websites, but there may be situations where you don't want to load the full framework in order to utilize Highcharts. For this we have built the Highcharts Standalone Framework, a compact file of 2 kB gzipped. It is available since Highcharts 3.0.5. Use this code to load the Standalone Framework from our CDN:
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
Option #3: Use MooTools or Prototype
While the jQuery adapter is built into Highcharts and Highstock, the MooTools and Prototype adapter has to be included separately. Use this code to include Highcharts with MooTools:
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script> <script src="http://code.highcharts.com/adapters/mootools-adapter.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>
and use this code to include Highcharts with Prototype:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script> <script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>
Note: If MooTools or Prototype is used they need to be included before highcharts.js, this is because highcharts.js checks to see if MooTools or Prototype are present.
B. Alternatively, load files from your own domain
In the example above the JavaScript files are loaded from ajax.googleapis.com and code.highcharts.com. The Highcharts files can be downloaded from highcharts.com and put on your webpage. Here is an example with jQuery and highcharts served from your own server:
<script src="/js/jquery.min.js"></script> <script src="/js/highcharts.js"></script>
C. Get started
You are now ready to use Highcharts, see Your first chart to get started.
*) Highcharts version 1.x relied on excanvas.js for rendering in IE. From Highcharts 2.0 (and all Highstock versions) IE VML rendering is built into the library.
How to set options
Highcharts use a JavaScript object structure to define the options or settings of a chart. This article explains how the options object works and how to use it.
The options object
When you initialize the chart using its constructor Highcharts.Chart, the options object is the first parameter you pass.
In the example below the code marked as red represents the options object:
$(document).ready(function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); });
- The Highcharts options in the examples are defined as object literals. By notating the configuration this way, we can have a clean, human readable and low space consuming config object. The following complicated code is perhaps more familiar to developers with a background from C-type languages:
// Bad code: var options = new Object(); options.chart = new Object(); options.chart.renderTo = 'container'; options.chart.type = 'bar'; options.series = new Array(); options.series[0] = new Object(); options.series[0].name = 'Jane'; options.series[0].data = new Array(1, 0, 4);
// Good code: var options = { chart: { renderTo: 'container', type: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
In the example above the options object is created by itself and can be added to the chart by passing it to the chart constructor:
$(document).ready(function() { var chart = new Highcharts.Chart(options); });
- After an object is created using the object literal notation, we can extend its members by the dot notation. Say we have an object like defined in the "Good code" above. The code below adds another series to it. Remember options.series is an array, so it has a push method.
options.series.push({ name: 'John', data: [3, 4, 2] })
- Another fact that can come in handy when working on JavaScript objects, is that the dot notation and square bracket notation are equivalent, so you can access all members by their string names. Which in practice means that
options.renderTo
options['renderTo']
Global Options
$(function() { Highcharts.setOptions({ chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, '#ffffff'], [1, '#f0f0ff'] ] }, borderWidth: 2, plotBackgroundColor: 'rgba(255, 255, 255, .9)', plotShadow: true, plotBorderWidth: 1 } }); var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); var chart2 = new Highcharts.Chart({ chart: { renderTo: 'container2', type: 'column' }, xAxis: { type: 'datetime' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); });
HighCharts理解与总结的更多相关文章
- 自身对highcharts理解
最近公司要求做一些图标,动态的添加数据,展示在手机上,以前对Echarts,d3,highcharts只是听说,也没实际去花一定的时间玩玩,也是自以为是,不就看看api的事,结果呢?-----被他们给 ...
- Highcharts使用教程（2）：设置选项
Highcharts使用教程(2):设置选项 使用教程 | 作者:走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1 概述:JavaScript图表工具Highchar ...
- HighCharts日期及数值格式化
1.函数原型 1 dateFormat(Stringformat,[Numbertime],[Booleancapitalize])::String 2.说明 格式化JavaScript 时间(也 ...
- Highcharts图形报表的简单使用
Highcharts是一个纯JavaScript框架,与MSChart完全不一样,可以在网页中使用,所以php.asp.net.jsp等等页面中都可以使用.Highcharts官网:http://ww ...
- HighCharts -教程+例子
Highchart简介: Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表, Highcharts目前支持直线图 ...
- highcharts 结合phantomjs纯后台生成图片
highcharts 结合phantomjs纯后台生成图片 highcharts 这个图表展示插件我想大家应该都知道,纯javascript编写,相比那些flash图表插件有很大的优势,至少浏览器不用 ...
- 基于Hadoop技术实现的离线电商分析平台（Flume、Hadoop、Hbase、SpringMVC、highcharts）
离线数据分析平台是一种利用hadoop集群开发工具的一种方式,主要作用是帮助公司对网站的应用有一个比较好的了解.尤其是在电商.旅游.银行.证券.游戏等领域有非常广泛,因为这些领域对数据和用户的特性把握 ...
- highcharts 系统梳理笔记
前言 highcharts最早接触它是在4年前,后来项目中很少用到图表这些东西,就算有也是用echart.他们思路都一样自己去官网上看api即可,构造数据填充节点,没有什么难点,这次是做完手上的工作然 ...
- 基于ssh框架的highcharts前后台数据交互实例
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...
随机推荐
- .NET框架源码解读之MYC编译器
在SSCLI里附带了两个示例编译器源码,用来演示CLR整个架构的弹性,一个是简化版的lisp编译器,一个是简化版的C编译器.lisp在国内用的少,因此这里我们主要看看C编译器的源码,源码位置是:\ss ...
- Hibernate 之HQL数据查询
1. HQL简介 HQL是面向对象的查询语言,与SQL查询语言相比,虽然在语法上类似,都是运行时进行解析,但HQL并不像SQL那样操作的是数据表,列等数据库对象,HQL所操作的对象是类,对象,属性等. ...
- 打造一个简单实用的的TXT文本操作及日志框架
首先先介绍一下这个项目,该项目实现了文本写入及读取,日志写入指定文件夹或默认文件夹,日志数量控制,单个日志大小控制,通过约定的参数让用户可以用更少的代码解决问题. 1.读取文本文件方法 使用:JIYU ...
- Sql语法高级应用之五：使用存储过程实现对明细多层次统计
前言 前面章节我们讲到了存储过程的基础用法,本章则将一个在项目中实际应用的场景. 在项目中经常会存在这样的需求,例如需要对明细列表进行按组.按级别.按人等进行统计,如果在附带列表的查询条件,又如何实现 ...
- fatal: Not a git repository (or any parent up to mount point /home)
问题:fatal: Not a git repository (or any parent up to mount point /home) 解决:git init
- kali linux之steghide
Steghide Linux 命令行隐写工具 Steghide是一款开源的隐写术软件,它可以让你在一张图片或者音频文件中隐藏你的秘密信息,而且你不会注意到图片或音频文件发生了任何的改变.而且,你的秘 ...
- 腾讯云服务器部署 django项目整个流程
CentOS7下部署Django项目详细操作步骤 前记:购买腾讯云服务器,配置自选,当然新用户免费体验半个月,我选择的系统是centos7系统版本, 接下来我们来看整个配置项目流程. 部署是基于:ce ...
- 为什么在AI领域网络安全更重要？先睹为快~
AI迎来了改变世界的新机遇,同时也迎来了新的网络安全问题,只要是联网的系统就会有漏洞爆出~ 随着大数据的应用,人工智能逐渐走入千家万户并显示出巨大的市场空间,从机器人客服.自动驾驶汽车到无人机等,全都 ...
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- JavaScript 函数声明，函数表达式，匿名函数的区别，深入理解立即执行函数(function(){…})()
function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...