hightcharts升级4.0以后支持3D了,应该算是一件大事,网上有人已经作了些3D图表,分享下。jquery
首先,须要说明hightcharts 4支持原生3d图,若是,你要作好效果的3d,建议下载最新的4版本。这是基础。ajax
其次,3d饼图,须要在plotOptions中设置深度属性:api
就是这样一句,设置为25:google
plotOptions.pie.depth: 25
准备工做完了,咱们开始制做3D饼图。3d
步骤一:按照老规矩,写入highcharts必要的JS:code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-3d.js"></script>
步骤二:ip
咱们为图表设定一个大小,高度为400px,用div将它包围,而后设置一个id为container,方便下面的js:get
<div id="container" style="height: 400px"></div>
步骤三it
填入js代码:io
$(function () { $('#container').highcharts({ chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0, } }, plotOptions: { pie: { depth: 25 } }, series: [{ data: [2, 4, 6, 1, 3] }] }); });
下面是代码和效果图: