共计 3335 个字符，预计需要花费 9 分钟才能阅读完成。
| 导读 | Highcharts 是一个用纯 JavaScript 编写的一个图表库。Highcharts 能够很简单便捷的在 web 网站或是 web 应用程序添加有交互性的图表。 |
本章节我们将为大家介绍 Highcharts 的气泡图。
配置
chart 配置
配置 chart 的 type 为 ‘bubble’。chart.type 描述了图表类型。默认值为 “line”。
chart.zoomType 属性可配置图表放大，通过拖动鼠标进行缩放，沿 x 轴或 y 轴进行缩放，可以设置为：’x’,’y’,’xy’。
| var chart = { | |
| type: 'bubble', | |
| zoomType: 'xy' | |
| }; |
实例
文件名：highcharts_bubble_basic.htm
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Highcharts 教程 | 菜鸟教程 (runoob.com)</title> | |
| <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="http://code.highcharts.com/highcharts.js"></script> | |
| <script src="http://code.highcharts.com/highcharts-more.js"></script> | |
| </head> | |
| <body> | |
| <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> | |
| <script language="JavaScript"> | |
| $(document).ready(function() { | |
| var chart = { | |
| type: 'bubble', | |
| zoomType: 'xy' | |
| }; | |
| var title = { | |
| text: 'Highcharts Bubbles' | |
| }; | |
| var series= [{ | |
| data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]] | |
| }, { | |
| data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]] | |
| }, { | |
| data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]] | |
| } | |
| ]; | |
| var json = {}; | |
| json.chart = chart; | |
| json.title = title; | |
| json.series = series; | |
| $('#container').highcharts(json); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
以上实例输出结果为：
3D 气泡图
series.marker
设置 series.marker 渐变让其看起来有 3D 的效果。
| marker: { | |
| fillColor: {radialGradient: { cx: 0.4, cy: 0.3, r: 0.7}, | |
| stops: [[0, 'rgba(255,255,255,0.5)'], | |
| [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')] | |
| ] | |
| } | |
| } |
实例
文件名：highcharts_bubble_3d.htm
| <html> | |
| <head> | |
| <title>Highcharts 教程 | 菜鸟教程 (runoob.com)</title> | |
| <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="/try/demo_source/highcharts.js"></script> | |
| <script src="http://code.highcharts.com/highcharts-more.js"></script> | |
| </head> | |
| <body> | |
| <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> | |
| <script language="JavaScript"> | |
| $(document).ready(function() { | |
| var chart = { | |
| type: 'bubble', | |
| plotBorderWidth: 1, | |
| zoomType: 'xy' | |
| }; | |
| var title = { | |
| text: 'Highcharts bubbles with radial gradient fill' | |
| }; | |
| var xAxis = { | |
| gridLineWidth: 1 | |
| }; | |
| var yAxis = { | |
| startOnTick: false, | |
| endOnTick: false | |
| }; | |
| var series= [{ | |
| data: [ | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [] | |
| ], | |
| marker: { | |
| fillColor: { | |
| radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, | |
| stops: [ | |
| [], | |
| []).setOpacity(0.5).get('rgba')] | |
| ] | |
| } | |
| } | |
| }, { | |
| data: [ | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [], | |
| [] | |
| ], | |
| marker: { | |
| fillColor: { | |
| radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, | |
| stops: [ | |
| [], | |
| []).setOpacity(0.5).get('rgba')] | |
| ] | |
| } | |
| } | |
| } | |
| ]; | |
| var json = {}; | |
| json.chart = chart; | |
| json.title = title; | |
| json.xAxis = xAxis; | |
| json.yAxis = yAxis; | |
| json.series = series; | |
| $('#container').highcharts(json); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
以上实例输出结果为：
正文完
星哥玩云-微信公众号
