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 # 项目场景：

提示：这里简述项目相关背景：
例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)

---

问题描述：

提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：

@Override
        public void run() {
            bytes = mmInStream.read(buffer);
            mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
        }

---

原因分析：

提示：这里填写问题的分析：
例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

---

解决方案：

提示：这里填写该问题的具体解决方案：
例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。

可以看到提示框 有个 七月 纽约时间等 , 有时候我们需要把七月 改成 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 

讲的非常清晰