Create a 3D scatter chart
Description
The following code shows how to create a 3D scatter chart.
Example
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
$(function () {<!-- w ww .j a v a 2s. c om-->
$('#container').highcharts({
chart: {
margin: [150, 75, 75, 75],
type: 'scatter',
options3d: {
enabled: true,
alpha: 20,
beta: 30,
depth: 200,
viewDistance: 10,
frame: {
bottom: {
size: 1,
color: 'rgba(0,0,0,0.05)'
}
}
}
},
yAxis: {
min: 0,
max: 10
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10
},
series: [{
data: [
// [X, Y, Z]
[1, 1, 1],
[1, 1, 2],
[1, 1, 5],
[2, 3, 2],
[2, 6, 4],
[4, 5, 7],
[4, 2, 8],
[7, 1, 3],
[7, 1, 5],
[8, 1, 5]
]
}]
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>