摘自：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.
Include the JavaScript files in the <head> section of your web page as shown below.
Use this code to include Highcharts with jQuery:
22 AUGUST 2013
With Highcharts included in your webpage you are ready to create your first chart.
We will start off by creating a simple bar chart.
<div id="container" style="width:100%; height:400px;"></div>
$(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.
window.addEvent(‘domready‘, function() { var chart1 = new Highcharts.Chart({ chart: { renderTo: ‘container‘, type: ‘bar‘ ... });
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 }] }); });
<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:
<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>
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>
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.
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>
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.
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.
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] }] }); });
// 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); });
options.series.push({ name: ‘John‘, data: [3, 4, 2] })
options.renderTo
options[‘renderTo‘]
$(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理解与总结,布布扣,bubuko.com
原文：http://www.cnblogs.com/peijie-tech/p/3587206.html