当前位置:首页 > 网页特效 > 表格图层 >

HTML5环境amcharts.js饼图插件演示效果

时间:2014-04-09 09:11 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 基于amcharts.js插件实现的动态饼图效果,在初始载入的时候,带有动画效果,不支持IE8,请使用高版本IE9测试,或改用火狐、Chrome等浏览器。
  • <title>amcharts.js饼图演示代码</title>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/146/73fi1rab/amcharts.js"></script>
    <div id="chartdiv"></div>
    <style>
    body {
    background:white;
    }
    div { margin: -.8em auto; text-align:center; width: 90%; height: 390px }
    </style>
    <script type="text/javascript">
    var chart;
    var legend;
    var chartData = [{
        country: "上海",
        value: 260},
    {
        country: "北京",
        value: 201},
    {
        country: "成都",
        value: 65},
    {
        country: "武汉",
        value: 39},
    {
        country: "天津",
        value: 19},
    {
        country: "乌鲁木齐",
        value: 10}];
    AmCharts.ready(function() {
        // 饼图
        chart = new AmCharts.AmPieChart();
        chart.dataProvider = chartData;
        chart.titleField = "country";
        chart.valueField = "value";
        chart.outlineColor = "";
        chart.outlineAlpha = 0.8;
        chart.outlineThickness = 2;
        // 3D
        chart.depth3D = 20;
        chart.angle = 30;
        // 图形写入
        chart.write("chartdiv");
    });
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-biaoge/7061.html

表格图层下载排行

最新文章