标签：插件 JavaScript chart Highcharts 图表 options var data HighCharts
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+
写在最后：
这就是插件，在主题库，或者框架上扩展的功能块，它会考虑到复用性，可配置性，可靠性，易用性。下一次，试着写一下，自己学习书写小插件的内容。
标签：插件,JavaScript,chart,Highcharts,图表,options,var,data,HighCharts 来源： https://blog.csdn.net/weixin_45048106/article/details/100747719
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。