相识Highcharts，几分钟玩转Highcharts
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，需要进行设置，打开快捷方式的属性设置目标：
这样才可以启用。
相识Highcharts，几分钟玩转Highcharts的更多相关文章
- 每天5分钟 玩转OpenStack 目录列表
最近在学习 OpenStack 的相关知识,一直苦于 OpenStack 的体系庞大以及复杂程度,学习没有进度,停滞不前.偶然机会在 51CTO 上发现了一个热点的专题关于 OpenStack 的,题 ...
- 写在最前面 - 每天5分钟玩转 OpenStack（1）
<每天5分钟玩转 OpenStack>是一个 OpenStack 教程,这是第 1 篇. 这个教程有下面两个特点: 系统讲解 OpenStack 从架构到各个组件:从整体到细节逐一讨论 重 ...
- 学习笔记之Linux Shell脚本教程：30分钟玩转Shell脚本编程
Linux Shell脚本教程:30分钟玩转Shell脚本编程 http://c.biancheng.net/cpp/shell/
- 学习 OpenStack 的方法论 - 每天5分钟玩转 OpenStack（150）
作为 OpenStack 的核心教程,我们已经到了最后总结的部分. OpenStack 目前已经有好几十个模块,本教程讨论的是最最重要的核心模块:Keystone,Nova,Glance,Cinder ...
- cloud-init 典型应用 - 每天5分钟玩转 OpenStack（174）
本节介绍几个 cloud-init 的典型应用:设置 hostanme,设置用户初始密码,安装软件. 设置 hostname cloud-init 默认会将 instance 的名字设置为 hostn ...
- Docker 的两类存储资源 - 每天5分钟玩转 Docker 容器技术（38）
我们从本章开始讨论 Docker 存储. Docker 为容器提供了两种存放数据的资源: 由 storage driver 管理的镜像层和容器层. Data Volume. 我们会详细讨论它们的原理和 ...
- Data Volume 之 bind mount - 每天5分钟玩转 Docker 容器技术（39）
storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...
- docker managed volume - 每天5分钟玩转 Docker 容器技术（40）
docker managed volume 与 bind mount 在使用上的最大区别是不需要指定 mount 源,指明 mount point 就行了.还是以 httpd 容器为例: 我们通过 - ...
- 如何共享数据？- 每天5分钟玩转 Docker 容器技术（41）
数据共享是 volume 的关键特性,本节我们详细讨论通过 volume 如何在容器与 host 之间,容器与容器之间共享数据. 容器与 host 共享数据 我们有两种类型的 data volume, ...
随机推荐
- Google Earth API 替换方案
众所周知,GE API将会在15年12月25日结束服务,对于众多采用该API的软件,需要一些替换方案. 例如google map或者cesiumjs http://cesiumjs.org/ 或者尝试 ...
- 数据库(SQL SERVER)常用知识点
1,连接数据库字符串 Data Source=192.168.1.249;Initial Catalog=bbx_uf_jiekou;User ID=sa;Password=123 Data Sour ...
- 使用TFS 自动编译时的一点设置
MSBuild参数: /p:VisualStudioVersion=10.0 指定使用的VS编译版本
- python __call__内置函数
__call__实现可以直接调用对象的作用
- Tomcat的优化
Tomcat的优化配置 修改tomcat的config目录下server.xml文件 <Connector port="9021" protocol="HTTP/ ...
- 断言（ASSERT)的用法
ASSERT ()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继续执行后面的语句.这个宏通常原来判 ...
- Height Half Values
public class HeightDemo { /** * 题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半: * 再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? * ...
- Ubuntu 16.04 启动错误 "a start job is running for hold until boot process finishes up"
老司机也差点翻船... 升级16.04的时候,将默认启动管理器(default display manager)选为gm3(gnome3)了(应该使用默认的lightgm)如果改成gm3,好像是nvi ...
- css3 自定义动画（2）位置的移动
<style> /*涉及到位置的必须给元素进行相对或绝对定位*/ @-webkit-keyframes move{ %{top:0px;left:0px;} %{top:0px;left: ...
- 1、在MAC上搭建React Native开发环境
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...