1>安装、
(1)使用Jquery
<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>
(2)使用Highcharts 独立框架
<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
(3)使用MOOTOOLS 或者 PROTOTYPE
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>
PROTOTYPE:
<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>
2>Your First Chart
(1)添加一个div,并给它设定width和height
<div id="container" style="width:100%; height:400px;"></div>
(2)用JavaScript标签初始化 , <script> </script>--------------JQuery 版.
$(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]
}]
});
});
chart--------图表样式
title----------图表标题
xAxis--------X轴
yAxis--------Y轴
series------图表数据
(3)使用MOOTOOLS
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'
...
});
(5)Highcharts 效果