HighCharts学习
先写上这个插件的网站,这里有详细的文档教程。而且排版也很好,如果想要更详细的了解,去官网。
https://www.highcharts.com.cn/docs
那我又在这费什么话呢,于是我重新定位了我要怎么写,不要照本宣科的大而全,要精简,摘选。要上案例。我是看别人讲到了这个插件好用,是基于jQuery的,基于JavaScript完美的兼容多种浏览器,样式多样的图表插件。我也觉得很好,就mark一下,通过这遍文章可以简单的知道它。也记录自己学习的过程。
先上实例:
实例一
代码如下(我引入的是cdn,现在网线,WiFi很普遍,我觉得用它很方便)
<title>第一个HighCharts图表</title>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px;height: 400px;"></div>
<script>
//图表的配置
var options = {
chart: {
type: 'bar' //条形图
},
title: {
text: '我的第一个图表'
},
xAxis: {
categories: ['苹果', '橘子', '香蕉']
},
yAxis: {
title: {
text: "吃水果的个数"
}
},
//设置数据
series: [{
name: "小明",
data: [1, 0, 4]
}, {
name: "小红",
data: [5, 7, 3]
}]
};
//图表初始化的函数
var chart = Highcharts.chart("container", options);
</script>
</body>
实例二
将工资表表转换为柱状图
<姓名 | 性别 | 工资 |
---|---|---|
孙悟空 | 男 | 8000 |
邹丽丽 | 女 | 12000 |
猪八戒 | 男 | 3000 |
嫦娥 | 女 | 2000 |
<script>
$(function() {
//创建两个数组
var names = new Array();
var salarys = new Array();
//使用ajax 方法得到服务器端数据
$.get("employee", function(data) {
//遍历5个对象
for (var i = 0; i < data.length; i++) {
//得到每个员工的名子和工资
name[i] = data[i].name;
salarys[i] = data[i].salary;
}
//创建图表
var options = {
//指定图表的类型
chart: { type: "column" //柱形图 },
title: { text: "员工工资一览表" },
xAxis: {
//指定x轴上分类
categories: names
},
yAxis: {
//设置最小值为0
min: 0,
title: { text: "工资" }
},
//数据数列
series: [{
name: "工资",
//指定工资的数组
data: salarys
}]
};
});
//绑定到div对象上
$("#container").highcharts(options);
})
</script>
这是从数据库获取数据渲染的实例,注意:options配置要放到get 回调函数里面,不然,get还未返回数据,下面options就配置数据为空,无法渲染出图形。
<script>
$(function() {
//创建两个数组
var names = ['孙悟空', '邹丽丽', '猪八戒', '嫦娥'];
var salarys = [8000, 12000, 3000, 2000];
//创建图表
var options = {
//指定图表的类型
chart: { type: "column" //柱形图 },
title: { text: "员工工资一览表" },
xAxis: {
//指定x轴上分类
categories:names
},
yAxis: {
//设置最小值为0
min: 0,
title: { text: "工资" },
//数据数列
series: [{
name: "工资",
//指定工资的数组
data: salarys
}]
};
//绑定到div对象上
$("#container").highcharts(options);
})
</script>
操作中还有个失误把数据写成字符串了,别问为什么这么低级的错误,反正错误写法没渲染,改正后渲染出来了。
// var salarys = ['800', '12000', '3000', '2000'];
另外,只是写了get从数据库获取数据的方式,但后来练习的实际渲染是用到下一段代码。
图表主要组成
一般情况下,HighCharts包含 标题 (Title)、坐标轴(Axis)、数据列(Series)、数据提示框(Tooltips)、图例(Legend)、版权标签(Credits)等,另外还可以包括导出功能按钮(Exporting)等。
1. 标题(Title)
图表标题,包含标题和副标题(subTitle),其中副标题是非必须的。
2. 坐标轴(Axis)
坐标轴包含x轴(xAxis)和y轴(yAxis)。通常情况下,x轴显示在图表的底部,y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴,为了对比或区分数据,Highcharts提供了多轴的支持。
3. 数据列(Series)
数据列即图表上一个或多个数据系列,比如曲线图中的一条曲线,柱状图中的一个柱形。
4. 数据提示框(Tooltip)
当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
5. 图例(Legend)
图例是图表中用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列。
6. 版权标签(Credits)
显示在图表右下方的包含链接的文字,默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
7. 导出功能(Exporting)
通过引入 exporting.js即可增加图表导出为常见文件功能。
8. 标示线(PlotLines)
可以在图表上增加一条标示线,比如平均值线,最高值线等。
9. 标示区(PlotBands)
可以在图表添加不同颜色的区域带,标示出明显的范围区域。
Highcharts 基本组成部分如下图所示:
如何设置图表配置
Highcharts 是通过 JavaScript 对象的形式(JSON)来定义图表的配置参数。
图表配置对象
当使用图表构造函数 Highcharts.Chart 来初始化图表时,图表的配置对象是以第二个参数传递给该构造函数的。
下面是示例代码:
var options = {
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]
}]
};
var chart = Highcharts.chart('container', options);
为了更好的使用 Highcharts 配置,你需要了解 JavaScript 对象的基本知识
图表容器
Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种:
1、通过构造函数
var charts = Highcharts.chart('container', {
// Highcharts 配置
});
2、或者通过 chart.renderTo 来指定
var charts = Highcharts.chart({
// Highcharts 配置
chart : {
renderTo : 'container' // 或 document.getElementById('container')
}
});
3、如果你的页面已经引入了 jQuery,那么还可以 jQuery 插件的形式调用
$("#container").highcharts({
// Highcharts 配置
});
注意顺序:先引入jQuery,如果你用第三种方式。
Highcharts 兼容性
- Highcharts 7 在 Highcharts 6 的基础上进一步将低版本浏览器相关函数的兼容包独立成一个文件,即 oldie-polyfills.js
- 从 Highcharts 6.0.0 开始,我们将兼容低版本 IE 的代码单独成一个模块文件,这样用户可以根据需求是否加载对应的文件
- Highcharts 4.2.0 起支持 CommonJS 模块标准,即你可以在支持 CommonJS 环境中使用 Highcharts。
- 对于低版本浏览器(IE6、IE8等)我们支持 jQuery 1.6+,主流浏览器(新版 Chrome、Firefox等)支持 jQuery 2.0+
写在最后:
这就是插件,在主题库,或者框架上扩展的功能块,它会考虑到复用性,可配置性,可靠性,易用性。下一次,试着写一下,自己学习书写小插件的内容。