HighCharts理解与总结 Installation Your first chart How to set options
摘自：http://www.highcharts.com/docs/getting-started/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 ></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 }] }); });