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

时间: 2024-12-18 19:24:12

AnyChart如何快速创建3D饼图和圈图(含代码)的相关文章

利用Jpgraph创建3D饼形图

用Jpgraph类库制作统计图功能及其强大,不仅可以绘制平面图形,而且可以绘制具有3D效果的图形.直接使用GD2函数库可以绘制出各种图形,当然也包括3D饼图,但使用GD2函数绘制3D图形要花费大量的时间,而且相对复杂,而采用Jpgraph类库绘制3D饼图却十分方便.快捷. 例:使用Jpgraph创建3D饼图进行部门业绩比较. 具体步骤如下: (1)在程序中导入Jpgraph类库及饼图绘制功能. require_once 'jpgraph/src/jpgraph.php'; //导入Jpgraph

利用Flare3D和Stage3D创建3D

Flare3D 是一款功能强大的引擎,它使得 Flash 中的 3D 内容管理变得更为简便. 它的设计宗旨是提供一个完美的开发工作流程,以便你能够获得事半功倍的效果. 本教程侧重讨论在 Flash 中创建 3D 游戏所需的 ActionScript 代码:但本范例项目不包括创建和导出游戏组件文件的过程. 在完成本教程之后,你将了解在Flash中开发一个完整 3D 游戏所需的基本概念. 在本范例中,你将使用 Stage3D 和 Flare3D 处理用于创建一个名称为 Yellow Planet 的

3D语音天气球(源码分享)——通过天气服务动态创建3D球

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3D语音天气球(源码分享)--创建可旋转的3D球 二:通过天气服务,从网络获取时实天气信息并动态生成"3D球" 三:Android语音服务和Unity的消息传递 四:Unity3D端和Android端的结合 关于项目的详细介绍和3D球的创建请看上面第一篇文章(重要) 今天主要讲解如何通过获取

Bounce.js – 快速创建漂亮的 CSS3 动画效果

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代码. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文

wwwlyjustcom基于HTML5快速搭建3D机房设备面板199O8836661

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果: 基于HTML5快速搭建3D机房设备面板我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步来.基于HTML5快速搭建3D机房设备面板看起来有模有样的,其实呢,它就是一

通过beego快速创建一个Restful风格API项目及API文档自动化(转)

通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界面. 一.创建数据库及数据表(MySQL) #db--jeedev -- ---------------------------- -- Table structure for `app` -- ---------------------------- DROP TABLE IF EXISTS `a

基于HTML5快速搭建3D机房设备面板

以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟的设备是机房设备,先来目睹下最终效果:http://www.hightopo.com/demo/blog_3d_20150810/server.html 我来解释下这个模型,一个带有透明玻璃门的机柜,机柜里装有5台设备,门可以开合,设备可以插拔,那么我么该如何搭建这样的设备呢?方法不难,我们一步一步

微信公众号可快速创建“门店小程序” 不用开发

“门店小程序”是啥?“门店小程序”是小程序的一项新能力.无需开发,商户就可在微信公众号后台快速创建“门店小程序”.这个小程序类似一张“店铺名片”,可以展示线下门店名称.简介.营业时间.联系方式.地理位置和图片等门店信息,并支持在公众号自定义菜单.图文消息和模板消息等场景中使用. 它长这样: (左侧为“门店小程序”示意图,将来商户可根据需要为门店小程序快速配置卡券.支付功能) “门店小程序”和你们平时用到的小程序不同点在于: 页面标准化——便于用户识别:指向性明确——是一个“门店”:创建简单——公

css3实践—创建3D立方体

css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的地方,这里把我学习的方法,过程分享给大家.再讲知识点之前,还是先弄清楚3D的坐标系吧,从网上搜了一张经典坐标系图,供大家回顾一下. 1.3D试图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的transform-style:pres