highcharts 图表生成

 

最近在项目中用到了图表插件,用的是highcharts插件中的曲线和饼图代码, 现在总结一下它的使用方法,方便各位少走弯路.

废话不多少,先看第一幅效果图

 

 

 

 

上幅图中暂时表示了6处地点,我们暂时来解析下这6处地点怎么改

标识 1  图表的标题

标识 2  图表的副标题

标识 3  图表的导出

标识 4  图例说明

标识 5  版权

标识 6 信息提示框(鼠标点击或触摸显示)

 

先贴代码 上来

 1 /**
 2      * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
 3      *
 4      */
 5     var chart = new Highcharts.Chart('container', {
 6         title: {
 7             text: '不同城市的月平均气温',        // 图1 .  图表的标题
 8             x: -20                                // 标题位置
 9         },
10         subtitle: {
11             text: '数据来源: WorldClimate.com',    // 图2 . 图表的副标题
12             x: -20
13         },
14         xAxis: {                                // X 坐标数据
15             categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
16         },
17         yAxis: {                                // Y 坐标数据
18             title: {                            // Y 坐标标题
19                 text: '温度 (°C)'
20             },
21             /**
22             plotLines: [{
23                 className:
24                 color: undefined
25                 dashStyle: 线条样式
26                 events: 事件
27                 id: 编号
28                 label: {标签}
29                 value: 值
30                 width: 宽度
31                 zIndex: 层叠
32                 }]
33             */
34             plotLines: [{                        // 标识线    
35                 value: 0,                        
36                 width: 1,
37                 color: '#808080'
38             }]
39         },
40         tooltip: {                                // 图6. 提示框     文档地址  https://api.hcharts.cn/highcharts#tooltip
41             valueSuffix: '°C'                    // 数值后缀
42         },
43         legend: {                                // 图4. 图例    文档地址  https://api.hcharts.cn/highcharts#legend            
44             layout: 'vertical',                    // 图例布局   horizontal(水平)  vertical(垂直)
45             align: 'right',
46             verticalAlign: 'middle',
47             borderWidth: 0,
48             enabled: true                        // 图例开关(默认显示图例  但是一般在手机上面不显示图例  则 应该为 false)    
49         },
50         /**
51             credits: {
52                 enabled: 启用
53                 href: 链接
54                 position: {位置}
55                 style: 样式
56                 text: 内容
57             }
58         */
59         credits:{                                // 图5. 版权信息  文档地址 https://api.hcharts.cn/highcharts#credits            
60             enabled: true    
61         },
62         exporting:{
63             enabled: true                        // 图3. 导出图表  文档地址 https://api.hcharts.cn/highcharts#exporting    
64         },
65         series: [{
66             name: '东京',
67             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
68         }, {
69             name: '纽约',
70             data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
71         }, {
72             name: '柏林',
73             data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
74         }, {
75             name: '伦敦',
76             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
77         }]
78     });

一般情况下,标识 2、3、4、5 不需要， 所以

副标题代码

1  subtitle: {
2      text: '数据来源: WorldClimate.com',    // 图2 . 图表的副标题
3       x: -20
4 },

 

这一段 可以去掉

标识 3、4、5 因为默认是true  所以需要 改为 false 

 

可以看一下效果

 

 

 现在是不是可以了 OK

可以看到提示框 有个 七月 纽约时间等 , 有时候我们需要把七月 改成 xxx七月 也不需要换行, 那我们可以这样改

1  tooltip: {                                
2      valueSuffix: '°C',                    // 数值后缀
3      headerFormat: '<div style="text-align: center">当前月份:{point.key}</div><br/>',
4 },

 

如果不需要换行的话 , 把后面的<br/> 去掉就行

再来看下效果

 

 

 

大家可以看下官方文档上面的:https://api.hcharts.cn/highcharts#exporting 

讲的非常清晰

 

posted @ 2017-05-17 16:51  风动随心  阅读(1071)  评论(0)  编辑  收藏  举报