HighCharts一个基于JavaScript的图表插件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HighCharts一个基于JavaScript的图表插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5542字，纯文字阅读大概需要8分钟。
内容图文
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+
写在最后：
这就是插件，在主题库，或者框架上扩展的功能块，它会考虑到复用性，可配置性，可靠性，易用性。下一次，试着写一下，自己学习书写小插件的内容。
内容总结
以上是互联网集市为您收集整理的HighCharts一个基于JavaScript的图表插件全部内容，希望文章能够帮你解决HighCharts一个基于JavaScript的图表插件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。