highcharts学习
一、简单使用：
1.下载highcharts包。网址为：https://www.highcharts.com.cn/download
2.将下载包解压。
3.新建html文件，引入第二部中解压文件夹内code目录下的highcharts.js 文件。
4.创建展示图表的容器。
5.图标属性配置。
6.初始化图标，展示。
完整代码如下：
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>highcharts-testtitle> 6 7 <script type="text/javascript" src=".\\js\\jquery-3.4.1.min.js">script> 8 <script type="text/javascript" src=".\\js\\highcharts.js">script> 9 head> 10 <body> 11 <div id="container" style="width: 600px; height: 400px;">div> 12 <script type="text/javascript"> 13 // 图标配置 14 var options = { 15 // 图标熟悉配置 16 chart: { 17 type: 'bar' 18 }, 19 // 图标标题配置 20 title: { 21 text: 'highchart测试' 22 }, 23 // 坐标轴配置 24 xAxis: { 25 categories: ['苹果', '香蕉', '橙子'] 26 }, 27 yAxis:{ 28 title:{ 29 text: '吃水果的个数' 30 } 31 }, 32 // 设置数据 33 series:[ 34 { 35 name: '小明', 36 data: [1, 0, 4] 37 }, 38 { 39 name: '小红', 40 data: [5, 3, 7] 41 } 42 ] 43 }; 44 // 1.图标初始化函数 45 // var chart = Highcharts.chart("container", options); // 接受两个参数。 第一个是显示图标的容器 第二个是图标的选项。 46 // 2.如果引入了jquery，还可以这样进行初始化 47 $('#container').highcharts(options); // 注意要先导入jquery在导入highcharts.js。否则会出错。 48 script> 49 body> 50 html>
二、属性配置：
1.坐标轴刻度标签(labels):
labels: {
enables: flase, // 是否启用labels设置 默认为true ，
formatter: function(){
return: this.value + "级";
}, // 标签格式化。默认返回 this.value
step: 2, // 设置步长，默认为1
2.数据列中的数据(data):
a.数值数组，配置数组中的值代表Y值，X值根据X轴的配置，要么自动计算，要么从0递增。在分类轴中，X值就是categoies的配置。
例：data: [1,3,5]
b.包含两个值的数组集合，集合数组中的第一个值代表X, 第二个值代表Y;如果是一个字符串，则代表该点的名字，并且X值会如 a 中所说的情况决定
例：data: [[5,2], [6, 5], [8, 4]] 或 data: [[“django”,2], ["flask", 5], ["tornado", 4]]