最近在项目中用到了图表插件,用的是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 宽度 31 zIndex: 层叠 32 }] 33 */ 34 plotLines: [{ // 标识线 35 value: 0, 36 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
讲的非常清晰