HighCharts学习
先写上这个插件的网站,这里有详细的文档教程。而且排版也很好,如果想要更详细的了解,去官网。
/docs
那我又在这费什么话呢,于是我重新定位了我要怎么写,不要照本宣科的大而全,要精简,摘选。要上案例。我是看别人讲到了这个插件好用,是基于jQuery的,基于JavaScript完美的兼容多种浏览器,样式多样的图表插件。我也觉得很好,就mark一下,通过这遍文章可以简单的知道它。也记录自己学习的过程。
先上实例:
实例一
代码如下(我引入的是cdn,现在网线,WiFi很普遍,我觉得用它很方便)
<title>第一个HighCharts图表</title><script src="/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>
实例二
将工资表表转换为柱状图
<
<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: {//设置最小值为0min: 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: {//设置最小值为0min: 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+写在最后:
这就是插件,在主题库,或者框架上扩展的功能块,它会考虑到复用性,可配置性,可靠性,易用性。下一次,试着写一下,自己学习书写小插件的内容。