Highcharts是一个功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。
官网：http://www.hcharts.cn/
我觉得对于刚接触一个东西的新手来说，有时候对一个东西真的可能毫无头绪，这个Highcharts的官网做的挺不错的。可以一点点学起。当然，看了下面我自己试着详细注释的代码，你可能看完就知道怎么用它了。了解了它的结构，查起API文档，Highcharts真的蛮简单。希望我可以帮你节省时间，你需要的只是API文档。
对了，别忘了先去下载highcharts.js这样的必备文件。
先看代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body >
<div id="container" style="height:400px"></div>
<script>
$(function () {
/*全局配置*/
Highcharts.setOptions({
chart: {
zoomType: 'xy',
/*图表背景颜色*/
backgroundColor: '#ffffff',
borderColor:'#EBBA95',
borderWidth:1,
type: 'line',
/*这里改变字体和设置大小*/
style: {
fontFamily: "Lucida Sans Unicode",
fontSize:'12px',
}
}
});
/*容器内highcharts的配置*/
$('#container').highcharts({
/*版权信息*/
credits : {
text:''
},
/*大标题*/
title: {
text: '双Y轴图'
},
/*副标题*/
subtitle: {
text: 'for：订单额和订单百分比'
},
/*x轴*/
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis:
[{ // Primary yAxis
labels: {
format: '{value}%',
style: {
color: '#89A54E'
}
},
title: {
text: '百分比',
style: {
color: '#89A54E'
}
},
min : 0
}, { // Secondary yAxis
title: {
text: '订单额',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} ',
style: {
color: '#4572A7'
}
},
opposite: true,
min : 0
}],
/*工具提示*/
tooltip: {
/*如果你需要给你图表的某一部分添加某些功能的话，就可以去查找Highcharts的函数库，像这样添加就可以了*/
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
/*基图的一些参数，数据点配置*/
plotOptions: {
series:{
cursor:'pointer',
/*折线中间白色圆圈*/
marker:{
fillColor:'#FFFFFF',
lineWidth:2,
lineColor:null
},
point:{
/*数据点的事件，可以有click，mouseOut，mouseOver等*/
events:{
click:function(){
alert('category:'+this.category+',value:'+this.y);
}
}
}
}
},
/*图例*/
legend: {
layout: 'vertical',
align: 'left',
x: 520,
verticalAlign: 'top',
y: 500,
floating: true,
backgroundColor: '#FFFFFF'
},
/*数据列，针对每一个数据列都可以配置它的颜色，type等各种信息*/
series: [{
name: '订单数',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' '
},
/*这一数据列的显示颜色*/
color:'#f29700' }, {
name: '百分比',
color: '#89A54E',
type: 'spline',
data: [5.0, 7.9, 8.5, 11.5, 16.2, 11.5, 25.2, 21.5, 13.3, 16.3, 12.9, 6.6],
tooltip: {
valueSuffix: '%'
},
color:'#f29700'
},
{
name: '订单数',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' '
},
color:'#666666' }, {
name: '百分比',
color: '#89A54E',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '%'
},
color:'#666666'
}]
});
});
</script>
</body>
</html>
实际上就是在hightcharts（{}）中进行各个模块的配置即可，所谓的配置就是给各个模块的对象字面量添加你所需要的对象，并给其赋值。
上面代码配置完成：
像api文档中提供的两个图，一目了然。
现在你情况都了解了，只要打开api文档去查询配置的参数就可以了，刚开始可能会感觉查起来头晕毫无头绪，其实只要按照上图，分门别类的查找起来，会发现其实很容易。
知道了Highcharts的原理下一步就是真正的用起来啦。我对上面的代码做了些改进与封装。通过传参进行配置，jquery选择器可以调用的方法。数据可以读取自定义的数据，也可以读取外部的json文件。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body >
<div id="main" style="height:400px"></div>
<script> $.fn.customChart = function(type,min,max,text){
/* var data =
{
data0 : [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data1 : [13, 13, 13, 13, 13, 13,13, 13, 13.3, 13.3, 13.9, 13.6],
data2 : [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
data3 : [13, 13, 13, 13, 13, 13,13, 13, 13.3, 13.3, 13.9, 13.6]
};*/
/*render成jQuery方法*/
var $container = $('div').appendTo(document.body);
var myChart = new Highcharts.Chart({
chart: {
/*使用传进的参数*/
renderTo:$container[0],
zoomType: 'xy',
/*图表背景颜色*/
backgroundColor: '#ffffff',
borderColor:'#EBBA95',
borderWidth:1,
type: type,
},
/*版权信息*/
credits : {
text:''
},
/*大标题*/
title: {
text: text,
},
/*副标题*/
/*subtitle: {
text: 'for：订单额和订单百分比'
},*/
/*x轴*/
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis:
[{ // Primary yAxis
labels: {
format: '{value}%',
style: {
color: '#89A54E'
}
},
title: {
text: '百分比',
style: {
color: '#89A54E'
}
},
min : 0
}, { // Secondary yAxis
title: {
text: '订单额',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} ',
style: {
color: '#4572A7'
}
},
opposite: true,
min : min,
max : max,
}],
/*工具提示*/
tooltip: {
/*如果你需要给你图表的某一部分添加某些功能的话，就可以去查找Highcharts的函数库，像这样添加就可以了*/
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
/*基图的一些参数，数据点配置*/
plotOptions: {
series:{
cursor:'pointer',
/*折线中间白色圆圈*/
marker:{
fillColor:'#FFFFFF',
lineWidth:2,
lineColor:null
},
point:{
/*数据点的事件，可以有click，mouseOut，mouseOver等*/
events:{
click:function(){
alert('category:'+this.category+',value:'+this.y);
}
}
}
}
},
/*图例*/
legend: {
layout: 'vertical',
align: 'left',
x: 10,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: '#FFFFFF'
},
/*数据列，针对每一个数据列都可以配置它的颜色，type等各种信息*/
series: [{
name: '订单数',
color: '#4572A7',
type: 'column',
yAxis: 1,
/*data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],*/
tooltip: {
valueSuffix: ' '
},
/*这一数据列的显示颜色*/
color:'#f29700' }, {
name: '百分比',
color: '#89A54E',
type: 'spline',
/*data: [5.0, 7.9, 8.5, 11.5, 16.2, 11.5, 25.2, 21.5, 13.3, 16.3, 12.9, 6.6],*/
tooltip: {
valueSuffix: '%'
},
color:'#f29700'
},
{
name: '订单数',
color: '#4572A7',
type: 'column',
yAxis: 1,
/* data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],*/
tooltip: {
valueSuffix: ' '
},
color:'#666666' }, {
name: '百分比',
color: '#89A54E',
type: 'spline',
/*data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],*/
tooltip: {
valueSuffix: '%'
},
color:'#666666'
}] });
/*myChart.series[0].setData(data.data0);
myChart.series[1].setData(data.data1);
myChart.series[2].setData(data.data2);
myChart.series[3].setData(data.data3);*/ /*读取外部json文件的数据*/
$.getJSON('data.json',function(data){
myChart.series[0].setData(data[0]);
myChart.series[1].setData(data[1]);
myChart.series[2].setData(data[2]);
myChart.series[3].setData(data[3]);
}); } $('#main').customChart('line',0,100,'订单量');
</script> </body>
</html>
当我调用外部的json文件的时候在谷歌浏览器下会出现问题：
经过多方查找，发现是因为谷歌浏览器禁用了本地ajax，需要进行设置，打开快捷方式的属性设置目标：
这样才可以启用。