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 ...
随机推荐
- Java异常：选择Checked Exception还是Unchecked Exception?
http://blog.csdn.net/kingzone_2008/article/details/8535287 Java包含两种异常:checked异常和unchecked异常.C#只有unch ...
- C#获取手机验证码+榛子云平台
今天给大家推荐一个简单的获取手机验证码注册+获取随机4位数 测试框架:.net4.7以上 1.榛子云注册:http://smsow.zhenzikj.com/,送一条测试短信,最低充10元即刻使用 2 ...
- MVC控制器中动作方法返回的结果
在MVC控制器中主要的返回方式有如下几种: 1.Content(): 返回文本类型的ContentResult,比如“这是我做的一个MVC”. 2.File(): 返回文件类型的内容FileResul ...
- 【转】.NET内存管理、垃圾回收
1. Stack和Heap 每个线程对应一个stack,线程创建的时候CLR为其创建这个stack,stack主要作用是记录函数的执行情况.值类型变量(函数的参数.局部变量 等非成员变量)都分配 ...
- Sql语法高级应用之六：如何在Sql语句中如何使用TRY...CATCH
TRY...CATCH使用范例 BEGIN TRY //逻辑语句块 END TRYBEGIN CATCH //Catch异常处理块 SET @msg = ERROR_MESSAGE(); PRINT ...
- Dapper.Contrib.Extensions问题
Dapper.Contrib.Extensions问题 Dapper.Extension.1.0.0.1\lib\net45\Dapper.Extension.dll Dapper.Contrib.1 ...
- Ubuntu16.04 - 怎么能够更好设置PATH变量，便于管理？
“/etc/profile”是linux里面的全局变量设置文件,加入这里的PATH变量,全局都可以使用,非常方便.加入时候很简单了,直接在PATH末尾加入":+要加入的变量"就可以 ...
- H - Birthday Paradox （生日悖论）
点击打开链接 Sometimes some mathematical results are hard to believe. One of the common problems is the bi ...
- 在PL/SQL里直接插入日期时提示 is not a valid date and time的解决方法
在PL/SQL Developer里直接往表里插入日期格式的数据时,经常会出现" is not a valid date and time"的错误,这是因为Oracle的日期格式和 ...
- 总结day12 ----装饰器
一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...