日期:2014-05-16  浏览次数:20465 次

JavaScript图表highcharts 4这下屌爆了

highcharts4支持3D,应该不是什么新鲜事了,随便抓一把图表也支持3D的,没什么新意。 如果你是这样认为,我只能说你没知识了。

?

如果你用过highcharts4就不会说他现在的3D功能不值一提。 正真的3D 功能不是照几张图表凑在一起,看起来立体就是3D的,这点在highcharts4效果图中可以看出,那种假3D时代应该淘汰了。

?

因为是新版本,所以很多人还停留在3时代,个人用,highcharts是免费的,如果有项目,建议大家考虑highcharts 4试试。只有真正体验过,才知其强大的效果。 给个效果参考:

?

先插入必要脚本:

<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>

?

下面是JS,其他随便折腾,要放插件扩展功能的,可以下载highcharts插件

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
				enabled: true,
                alpha: 45,
                beta: 0,
            }
        },
        plotOptions: {
            pie: {
                depth: 25
            }
        },
        series: [{
            data: [2, 4, 6, 1, 3]
        }]
    });
});

?

有用的资料:

?

  • highcharts官网
  • highcharts插件
  • highcharts?4深度解析