You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.2 KiB
127 lines
4.2 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Highcharts Example</title>
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
// Give the points a 3D feel by adding a radial gradient
|
|
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
|
|
return {
|
|
radialGradient: {
|
|
cx: 0.4,
|
|
cy: 0.3,
|
|
r: 0.5
|
|
},
|
|
stops: [
|
|
[0, color],
|
|
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
|
|
]
|
|
};
|
|
});
|
|
|
|
// Set up the chart
|
|
var chart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'container',
|
|
margin: 100,
|
|
type: 'scatter',
|
|
options3d: {
|
|
enabled: true,
|
|
alpha: 10,
|
|
beta: 30,
|
|
depth: 250,
|
|
viewDistance: 5,
|
|
|
|
frame: {
|
|
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
|
|
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
|
|
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: 'Draggable box'
|
|
},
|
|
subtitle: {
|
|
text: 'Click and drag the plot area to rotate in space'
|
|
},
|
|
plotOptions: {
|
|
scatter: {
|
|
width: 10,
|
|
height: 10,
|
|
depth: 10
|
|
}
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
max: 10,
|
|
title: null
|
|
},
|
|
xAxis: {
|
|
min: 0,
|
|
max: 10,
|
|
gridLineWidth: 1
|
|
},
|
|
zAxis: {
|
|
min: 0,
|
|
max: 10
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
series: [{
|
|
name: 'Reading',
|
|
colorByPoint: true,
|
|
data: [[1,6,5],[8,7,9],[1,3,4],[4,6,8],[5,7,7],[6,9,6],[7,0,5],[2,3,3],[3,9,8],[3,6,5],[4,9,4],[2,3,3],[6,9,9],[0,7,0],[7,7,9],[7,2,9],[0,6,2],[4,6,7],[3,7,7],[0,1,7],[2,8,6],[2,3,7],[6,4,8],[3,5,9],[7,9,5],[3,1,7],[4,4,2],[3,6,2],[3,1,6],[6,8,5],[6,6,7],[4,1,1],[7,2,7],[7,7,0],[8,8,9],[9,4,1],[8,3,4],[9,8,9],[3,5,3],[0,2,4],[6,0,2],[2,1,3],[5,8,9],[2,1,1],[9,7,6],[3,0,2],[9,9,0],[3,4,8],[2,6,1],[8,9,2],[7,6,5],[6,3,1],[9,3,1],[8,9,3],[9,1,0],[3,8,7],[8,0,0],[4,9,7],[8,6,2],[4,3,0],[2,3,5],[9,1,4],[1,1,4],[6,0,2],[6,1,6],[3,8,8],[8,8,7],[5,5,0],[3,9,6],[5,4,3],[6,8,3],[0,1,5],[6,7,3],[8,3,2],[3,8,3],[2,1,6],[4,6,7],[8,9,9],[5,4,2],[6,1,3],[6,9,5],[4,8,2],[9,7,4],[5,4,2],[9,6,1],[2,7,3],[4,5,4],[6,8,1],[3,4,0],[2,2,6],[5,1,2],[9,9,7],[6,9,9],[8,4,3],[4,1,7],[6,2,5],[0,4,9],[3,5,9],[6,9,1],[1,9,2]]
|
|
}]
|
|
});
|
|
|
|
|
|
// Add mouse events for rotation
|
|
$(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
|
|
e = chart.pointer.normalize(e);
|
|
|
|
var posX = e.pageX,
|
|
posY = e.pageY,
|
|
alpha = chart.options.chart.options3d.alpha,
|
|
beta = chart.options.chart.options3d.beta,
|
|
newAlpha,
|
|
newBeta,
|
|
sensitivity = 5; // lower is more sensitive
|
|
|
|
$(document).bind({
|
|
'mousemove.hc touchdrag.hc': function (e) {
|
|
// Run beta
|
|
newBeta = beta + (posX - e.pageX) / sensitivity;
|
|
newBeta = Math.min(100, Math.max(-100, newBeta));
|
|
chart.options.chart.options3d.beta = newBeta;
|
|
|
|
// Run alpha
|
|
newAlpha = alpha + (e.pageY - posY) / sensitivity;
|
|
newAlpha = Math.min(100, Math.max(-100, newAlpha));
|
|
chart.options.chart.options3d.alpha = newAlpha;
|
|
|
|
chart.redraw(false);
|
|
},
|
|
'mouseup touchend': function () {
|
|
$(document).unbind('.hc');
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="../../js/highcharts.js"></script>
|
|
<script src="../../js/highcharts-3d.js"></script>
|
|
<script src="../../js/modules/exporting.js"></script>
|
|
|
|
<div id="container" style="height: 400px"></div>
|
|
</body>
|
|
</html>
|