AnyChart如何快速创建3D饼图和圈图(含代码)

AnyChart如何快速创建3D饼图和圈图   

在新发布的7.6.0版本中,AnyChart已经支持3D的饼图和圈图了,这篇文章主要介绍如何使用JavaScript创建3D的饼图和圈图,AnyChart提供了AnyChart.pie3d()函数用于创建饼图,具体可以查看下面的代码:

Anychart试用版本下载地址:http://www.componentcn.com/kongjianchanpin/tubiao/jibentubiaokongjian/2014-09-15/161.html 

 

详细代码如下

<html>

<head>
  
<script src="//cdn.AnyChart.com/js/7.6.0/AnyChart-bundle.min.js"></script>
  
<style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

</head>

<body>
    
<div id="container">
</div>
    
<script type="text/javascript">


AnyChart.onDocumentReady(function() {
  
// create pie chart with passed data
  
chart = AnyChart.pie3d([
    
['Department Stores', 6371664],
    
['Discount Stores', 7216301],
    
['Men\'s/Women\'s Stores', 1486621],
    
['Juvenile Specialty Stores', 786622],
    
['All other outlets', 900000]
  
]);

  
// set container id for the chart
  
chart.container('container');

  
// set chart title text settings
  
chart.title('ACME Corp. apparel sales through different retail channels');

  
// set legend title text settings
  
chart.legend(true);
  
chart.legend().title('Retail channels');

  // set legend position and items layout
  
chart.legend().position('bottom');
  
chart.legend().itemsLayout('horizontal');
  
chart.legend().align('center');

  
// initiate chart drawing
  
chart.draw();

});
    
</script>

</body>

</html>
 

更多问题可以直接联系:QQ593638308

posted on 2015-08-05 11:13  控件技术研究  阅读(528)  评论(1编辑  收藏  举报

导航