html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<html>2
<head>3
<meta charset="UTF-8" />4
<title>Highcharts 教程 | 时代Java与您共同学习(NowJava.com)</title>5
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>6
<script src="https://code.highcharts.com/highcharts.js"></script>7
<script src="https://code.highcharts.com/highcharts-3d.js"></script>8
</head>9
<body>10
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>11
<div id="sliders">12
<table>13
<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>14
<tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>15
</table>16
</div>17
<script language="JavaScript">18
$(document).ready(function() { 19
var chart = {20
renderTo: 'container',21
type: 'column',22
margin: 75,23
options3d: {24
enabled: true,25
alpha: 15,26
beta: 15,27
depth: 50,28
viewDistance: 2529
}30
};31
var title = {32
text: '图表旋转实例' 33
};34
var subtitle = {35
text: '通过拖动下面的滑块测试' 36
};37
38
var plotOptions = {39
column: {40
depth: 2541
}42
};43
var series= [{44
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]45
}]; 46
47
var json = {}; 48
json.chart = chart; 49
json.title = title; 50
json.subtitle = subtitle; 51
json.series = series;52
json.plotOptions = plotOptions;53
var highchart = new Highcharts.Chart(json);54
55
function showValues() {56
$('#R0-value').html(highchart.options.chart.options3d.alpha);57
$('#R1-value').html(highchart.options.chart.options3d.beta);58
}59
60
// Activate the sliders61
$('#R0').on('change', function () {62
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java