共计 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: [ | |
[ | ],|
[0.5).get('rgba')] | ]).setOpacity(|
] | |
} | |
} | |
}, { | |
data: [ | |
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ],|
[ | ]|
], | |
marker: { | |
fillColor: { | |
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, | |
stops: [ | |
[ | ],|
[0.5).get('rgba')] | ]).setOpacity(|
] | |
} | |
} | |
} | |
]; | |
var json = {}; | |
json.chart = chart; | |
json.title = title; | |
json.xAxis = xAxis; | |
json.yAxis = yAxis; | |
json.series = series; | |
$('#container').highcharts(json); | |
}); | |
</script> | |
</body> | |
</html> |
以上实例输出结果为:
正文完
星哥玩云-微信公众号
