一、简单使用：
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-test</title>
6 <!-- 如果有jquery 导入的时候先导入-->
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]]
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
