HighCharts图表插件使用心得

发表于 | 分类于

1、商品走势图，HighCharts插件的使用心得

1）引入highchart.js文件，创建表格父容器
1
2
3
4
5
6
7
8
9
10
<!--引入相关文件-->
<head>
<!-- Highcharts 价格走势图 -->
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<!-- 没有数据时，显示暂无数据或英文的暂无数据 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/no-data-to-display.js"></script>
</head>
<!--创建一个id为container的div，并制定图表的最小宽度-->
<div id="container" style="min-width:400px;height:300px"></div>
2）用对象的方式配置options，首先是基本的样式配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 图表基础（通用）配置
var options = {
    credits: {
        enabled: false
    },
    // 没有数据时，显示的内容，该功能需要引入特定js文件，具体看html页面底部
    lang: {
        noData: '暂无数据!'
    },
    chart: {
        renderTo: 'container', // 图表容器
        type: 'spline',
        // 指定内边距，下面的四个配置可以用 spacing: [10, 10, 15, 10] 来代替
        spacingBottom: 15,
        spacingTop: 10,
        spacingLeft: 10,
        spacingRight: 10,
        margin: 50, // 指定外边距
        width: 800, // 指定图表宽度
        height: 300 // 指定图表高度
    },
    // 表格的标题
    title: {
        text: '',
        x: -20
    },
    // 表格的子标题    
    subtitle: {
        text: '',
        x: -20
    },
    // y轴的配置
    yAxis: {
        title: {
            text: ''
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],
        gridLineDashStyle: 'LongDash' // 背景线，设置为长虚线
    },
    // 表头或者每个组数据的标题吧，不知道叫什么，设置为true就可以看到真面目
    legend: {
        enabled: false
    },
};
3）通过Ajax异步请求，将数据存放到数组，并传入highchart的配置中，伪代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//----- 定义全局变量，用于存放Ajax请求到的数据----------------
var times = []; // x轴数据，价格变动时间
var prices = []; // y轴数据，变动后的价格
var reasons = []; // 标签内容，价格变动理由
//--------------请求数据----------------------------------
// Ajax请求函数，伪代码如下
_util.getRecord(参数，回调函数，错误回调(errMsg))；
// 1.每次请求前清空数组，防止数据叠加，很重要！！！
// 2.发起ajax请求
// 3.数据请求成功，存入数组，并传给Highcharts插件的options配置项
 times = [];
 prices = [];
 reasons = [];
// 4.将数据push到对应数组中
 for (var index in res.price_record) {
     // 格式化日期并push到数组
     times.push(_this.formatChartTime(res.price_record[index].create_time));
     // 格式化价格并push到数组
     prices.push(res.price_record[index].change_price);
     // 价格改动理由push到数组
     reasons.push(res.price_record[index].reason);
 }
//---------将数据传入配置-----------------------------------
// 传入x轴数据 
 var xAxis = {
     // 传入价格修改时间，x轴
     categories: times,
 };
// 传入y轴数据
 var series = [{
     // 该值会在默认的toolTip内容区显示
     name: '商品价格',
     // 传入价格变动的数组，y轴
     data: prices,
 }];
 // 传入x轴数据 
 var xAxis = {
     // 传入价格修改时间，x轴
     categories: times,
 };
4）本次需求需要用到动态标签，同样的直接将数据传入配置中即可。需要强调的是，动态标签的值，这里采用的是获取point点的index值，映射到【价格变动理由数组】中，从而实现鼠标滑过piont时改变标签的值。获取当前点的index值的方法（来自StackOverflow）

text: reasons[this.series.data.indexOf(this)],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 动态生成标签，用于显示价格变动理由
 var plotOptions = {
     series: {
         point: {
             events: {
                 mouseOver: function() {
                     var chart = this.series.chart;
                     // 创建label，如果不存在的话
                     if (!chart.lbl) {
                         chart.lbl = chart.renderer.label('', this.x, this.y)
                             .attr({
                                 padding: 10,
                                 // 圆角
                                 r: 5,
                                 // 背景颜色
                                 fill: '#666666',
                                 zIndex: 100,
                                 fontSize: 12,
                             })
                             .css({
                                 color: '#ffffff',
                             })
                             .add();
                     }
                     // 设置label的属性
                     chart.lbl
                         // 显示
                         .show()
                         // text 为label标签值，x,y为标签位置，zIndex为标签层级
                         .attr({
                             // 获取当前点的index值，并显示对应数组的值。
                             text: reasons[this.series.data.indexOf(this)],
                             // 标签的位置，使用point.plotX和point.plotY获取当前数据点的坐标值（this指代point对象）。chart.plotLeft是表格相对视口左侧的偏移量，+50是自定义的偏移量，如果为0，标签将紧贴point的右侧。
                             x: this.plotX + chart.plotLeft + 50,
                             y: this.plotY + chart.plotTop - 50,                          // 设置z-index值，防止标签被遮挡  
                             zIndex: 100
                         });
                 }
             }
         },
         events: {
             // 鼠标滑出数据点，隐藏
             mouseOut: function() {
                 if (this.chart.lbl) {
                     this.chart.lbl.hide();
                 }
             }
         }
     }
 };
5）根据项目需要，定制toolTip提示框，配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 提示框配置
 var tooltip = {
     backgroundColor: '#666666', // 背景颜色
     borderColor: '#666666', // 边框颜色
     borderRadius: 10, // 边框圆角
     borderWidth: 0, // 边框宽度
     shadow: true, // 是否显示阴影
     animation: true, // 是否启用动画效果
     style: { // 文字内容相关样式
         color: "#ffffff",
         fontSize: "12px",
         fontWeight: "blod",
         fontFamily: "Courir new"
     },
     useHTML: true,
     crosshairs: true, // 仅设置y轴准星线（竖直向下的线）
     // crosshairs:[true,true] // 同时设置x、y轴的准星线
     crosshairs: [{ // 设置准星线样式
         width: 1,
         color: '#50A2FF',
         dashStyle: 'longdashdot',
         zIndex: 1
     }],
     // 自定义toolTip的内容和样式
     formatter: function() {
         // 格式化输出提示框，this.y表示输出y轴的值
         return '￥' + this.y;
     }
 };
6）关键的一步，绑定刚刚上面的配置到options，new一个highchart对象，并传入options就可以了。
1
2
3
4
5
6
7
// 绑定配置
 options.series = series;
 options.xAxis = xAxis;
 options.plotOptions = plotOptions;
 options.tooltip = tooltip;
 // 传入配置，绘制图像
 var chart = new Highcharts.Chart('container', options);
7）最后，附上比较完整的代码getChangePriceRecord（data,success,error）是一个封装好的ajax函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
 // 获取不同规格的价格走势图
getRecord: function() {
   var _this = this;
   _goods.getChangePriceRecord({
           product_id: _this.data.goodsId,
           standard_id: _this.data.current_selected_goods_id
       }, function(res) {
           // 清空数组，防止数据叠加，很重要！！！！
           times = [];
           prices = [];
           reasons = [];
           for (var index in res.price_record) {
               // 格式化日期并push到数组
               times.push(_this.formatChartTime(res.price_record[index].create_time));
               // 格式化价格并push到数组
               prices.push(res.price_record[index].change_price);
               // 价格改动理由push到数组
               reasons.push(res.price_record[index].reason);
           }
           // 图表基础（通用）配置
           var options = {
               credits: {
                   enabled: false
               },
               // 没有数据时，显示的内容，该功能需要引入特定js文件，具体看html页面底部
               lang: {
                   noData: '暂无数据!'
               },
               chart: {
                   renderTo: 'container',
                   type: 'spline',
                   // 指定内边距，下面的四个配置可以用 spacing: [10, 10, 15, 10] 来代替
                   spacingBottom: 15,
                   spacingTop: 10,
                   spacingLeft: 10,
                   spacingRight: 10,
                   // 指定外边距
                   margin: 50,
                   // 指定图表大小
                   width: 800,
                   height: 300
               },
               // 表格的标题
               title: {
                   text: '',
                   x: -20
               },
               // 表格的子标题    
               subtitle: {
                   text: '',
                   x: -20
               },
               // y轴的配置
               yAxis: {
                   title: {
                       text: ''
                   },
                   plotLines: [{
                       value: 0,
                       width: 1,
                       color: '#808080'
                   }],
                   // 背景线，设置为长虚线
                   gridLineDashStyle: 'LongDash'
               },
               // 表头或者每个组数据的标题吧，不知道叫什么，设置为true就可以看到真面目
               legend: {
                   enabled: false
               },
           };
           // 传入x轴数据 
           var xAxis = {
               // 传入价格修改时间，x轴
               categories: times,
           };
           // 传入y轴数据
           var series = [{
               // 该值会在默认的toolTip内容区显示
               name: '商品价格',
               // 传入价格变动的数组，y轴
               data: prices,
           }];
           // 动态生成标签，用于显示价格变动理由
           var plotOptions = {
               series: {
                   point: {
                       events: {
                           mouseOver: function() {
                               var chart = this.series.chart;
                               // 创建label，如果不存在的话
                               if (!chart.lbl) {
                                   chart.lbl = chart.renderer.label('', this.x, this.y)
                                       .attr({
                                           padding: 10,
                                           r: 5,
                                           fill: '#666666',
                                           zIndex: 100,
                                           fontSize: 12,
                                       })
                                       .css({
                                           color: '#ffffff',
                                       })
                                       .add();
                               }
                               // 设置label的属性
                               chart.lbl
                                   // 显示
                                   .show()
                                   // text 为label标签值，x,y为标签位置，zIndex为标签层级
                                   .attr({
                                       // 获取当前点的index值，并显示对应数组的值。
                                       text: reasons[this.series.data.indexOf(this)],
                                       x: this.plotX + chart.plotLeft + 50,
                                       y: this.plotY + chart.plotTop - 50,
                                       zIndex: 100
                                   });
                           }
                       }
                   },
                   events: {
                       // 鼠标滑出数据点，隐藏
                       mouseOut: function() {
                           if (this.chart.lbl) {
                               this.chart.lbl.hide();
                           }
                       }
                   }
               }
           };
           // 提示框配置
           var tooltip = {
               backgroundColor: '#666666', // 背景颜色
               borderColor: '#666666', // 边框颜色
               borderRadius: 10, // 边框圆角
               borderWidth: 0, // 边框宽度
               shadow: true, // 是否显示阴影
               animation: true, // 是否启用动画效果
               style: { // 文字内容相关样式
                   color: "#ffffff",
                   fontSize: "12px",
                   fontWeight: "blod",
                   fontFamily: "Courir new"
               },
               useHTML: true,
               crosshairs: true,
               crosshairs: [{ // 设置准星线样式
                   width: 1,
                   color: '#50A2FF',
                   dashStyle: 'longdashdot',
                   zIndex: 1
               }],
               formatter: function() {
                   // 格式化输出提示框，this.y表示输出y轴的值
                   return '￥' + this.y;
               }
           };
           // 绑定配置
           options.series = series;
           options.xAxis = xAxis;
           options.plotOptions = plotOptions;
           options.tooltip = tooltip;
           // 传入配置，绘制图像
           var chart = new Highcharts.Chart('container', options);
       },
       function(errMsg) {
           _util.errorTips(errMsg);
       })
},
// 时间格式化,格式为：月/日，小于10，前面也不加0
formatChartTime: function(now) {
   var now = new Date(now * 1000);
   var month = (now.getMonth() + 1);
   var date = (now.getDate());
   return month + "/" + date;
},

以上，就是Highcharts的使用总结了，更多高级功能等待大家去发掘！