4-Highcharts 3D图之3D普通饼图
<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js"></script> <script src="../Highcharts-4.2.5/js/highcharts.js"></script> <script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script> <script src="../Highcharts-4.2.5/js/themes/gray.js"></script><!--主题 --> <script> $(function () { var chart = new Highcharts.Chart({ chart:{ renderTo:'container',//图表描绘出后放到页面的某一具体位置 type:'pie',//饼图 line线性图,colmun柱状图 //边距是指图表的外边与图形区域之间的距离,数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft. marginTop:80, marginRight:40, //3D图像设置项。3D效果需要引入highcharts-3d.js,下载或者在线路径为code.highcharts.com/highcharts-3d.js. options3d:{ enabled:true,//画图表是否启用3D函数,默认值为:false alpha:10//3D图旋转角度,此为α角,内旋角度默认为0 //beta:25,//3D图旋转角度,此为β角,外旋角度 默认为0 //图表的全深比,即为3D图X,Y轴的平面点固定,以图的Z轴原点为起始点上下旋转,值越大往外旋转幅度越大,值越小往内旋转越大,depth的默认值为100 //默认是: 100 //depth:70, //viewDistance: 25//它定义了观看者在图前看图的距离,它是非常重要的对于计算角度影响在柱图和散列图,此值不能用于3D的饼图,默认值为100 } }, /************标题***************/ //标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。 //主标图 title: { text:'浏览器占市场比例' }, //副标题 subtitle: { }, //plotOptions用于设置图表中的数据点相关属性。 plotOptions: { pie:{ // 是否将每个系列的值叠加在彼此的顶部上。 //stacking: 'normal', allowPointSelect:true, cursor:'pointer', dataLabels:{ enabled:true, format:'{point.name}' } //depth:25 } }, /************坐标轴***************/ //所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧 //(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调 //xAxis: { //获取月份的简称 //categories: Highcharts.getOptions().lang.shortMonths //categories:['A','B','C','D','E'] //}, //yAxis: { //是否在正常显示的对立面显示轴。 //正常是垂直坐标轴显示在左边,水平坐标轴显示在底部,因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部,这通常用于有两个或多个坐标轴。 //opposite: true //}, /*************版权信息**********************/ credits:{ enabled:false // 禁用版权信息 }, /*************数据提示框**********************/ //tooltip: { valueSuffix: '°C' }, tooltip: { headerFormat: '<b>{point.key}</b><br>', pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.percentage:.lf}%' }, /************图例***************/ //省略图例会在下面显示 //也可以设置 设置在下方 legend: { //layout: 'horizontal',//horizontal,vertical //align: 'center', //verticalAlign: 'bottom', //borderWidth: 0 //enabled:false//关闭图例 }, /*****************数据列******************/ /* series: [ { name: 'Sales', //data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3] //如果有个值为空的话,只需设为null data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3] } ]*/ /* series: [{ name: 'AA', data: [5, 3, 4, 7, 2], //此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西,只要分组的系列“堆栈选项”相互匹配。 stack: '1' }, { name: 'BB', data: [3, 4, 4, 2, 5], stack: '1' }, { name: 'CC', data: [2, 5, 6, 2, 1], stack: '2' }, { name: 'CC', data: [3, 0, 4, 4, 3], stack: '2' }] */ series: [{ type: 'pie', name: '所占比例', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true,//属于饼图,是否显示 selected: true//是否默认选中 }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); /* chart: { renderTo: 'container', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }, title: { text: 'Chart rotation demo' }, subtitle: { text: 'Test options by dragging the sliders below' }, plotOptions: { column: { depth: 25 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); */ /* $('#R0').on('change', function(){ chart.options.chart.options3d.alpha = this.value; showValues(); chart.redraw(false); }); $('#R1').on('change', function(){ chart.options.chart.options3d.beta = this.value; showValues(); chart.redraw(false); }); function showValues() { $('#R0-value').html(chart.options.chart.options3d.alpha); $('#R1-value').html(chart.options.chart.options3d.beta); } showValues(); */ }); </script> </head> <body> <div id="container" style="min-width:700px;height:400px"></div> <!-- 调节部分 --> <div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;"> <table> <tr> <td>Alpha Angle</td><!-- 内旋角 --> <td> <input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span> </td> </tr> <tr> <td>Beta Angle</td><!-- 外旋角 --> <td> <input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span> </td> </tr> </table> </div> </body> </html>
4-Highcharts 3D图之3D普通饼图的更多相关文章
- 3-Highcharts 3D图之3D柱状图分组叠堆3D图
<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...
- 2-Highcharts 3D图之3D柱状图带可调试倾斜角度
<!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...
- 1-Highcharts 3D图之普通3D柱状图与带空值
<!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...
- 自制裸眼3D图【推荐】
Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...
- 用ChemDraw画3D图的方法
在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...
- 图数据 3D 可视化在 Explorer 中的应用
本文首发于 NebulaGraph 公众号 前言图数据可视化是现代 Web 可视化技术中比较常见的一种展示方式,NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品 ...
- 多比Web 3D展示(3D机房/3D监控)中间件多比Web 3D展示(3D机房/3D监控)中间件免费下载购买地址
多比3D是实现3D场景搭建的软件开发包,可以创建广泛的3D应用,适用于高端制造.能源.国防军工.教育科研.城市规划及建筑环艺.生物医学等领域的虚拟仿真,应用于虚拟展示.虚拟设计.方案评审.虚拟装配.虚 ...
- 使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课
项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位,防火器材定位,人员逃生路径规划,火情预警,消防演习都是特别重要的环节.所以 ...
- 使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课
序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...
随机推荐
- 通过Messenger与后台连接(单向操作,activity向service发送数据)
xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- javascript中split字符串分割函数
1. var ss=s.split("fs"); for(var i=0;i<ss.length;i++){ 处理每一个ss[i]; } 2. "2:3:4:5&q ...
- 种树 (codevs 1653) 题解
[问题描述] 一条街的一边有几座房子.因为环保原因居民想要在路边种些树.路边的地区被分割成块,并被编号为1..n.每个块大小为一个单位尺寸并最多可种一棵树.每个居民想在门前种些树并指定了三个号码b,e ...
- python 循环、循环设计、循环对象
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 1.循环 循环用于重复执行一些程序块.从上一讲的选择结构,我们已经看到了如何用缩进 ...
- "Programming"和"Programming"是同一个"Programming"吗?
什么意思? C语言没有专门的字符串类型,但是,它同样可以处理字符串.本文不是讨论字符串的使用,而是讨论C字符串之间的关系.如题,在C语言代码中,如果定义#define STR = "Prog ...
- 使用Linux调用资源库中的Job报错-ERROR: No repository provided, can't load job.
使用kettle调用资源库中的作业或者是转换,需要注意一下两个问题: 问题一:(-rep后不需要IP)标准shell代码如下 #!/bin/bash export JAVA_HOME=/usr/lib ...
- yum代理设置
vi /etc/yum.conf 加入以下:proxy=http://代理服务器ip:port 如果代理需要账号密码:proxy_username=userproxy_password=密码
- iOS 开发者能用上的 10 个 Xcode 插件
本文由 伯乐在线 - 邢敏 翻译,黄利民 校稿.未经许可,禁止转载! 英文出处:code.tutsplus.com.欢迎加入翻译小组. 1. XcodeColors:给 Xcode 控制台添加颜色 2 ...
- UITableView swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- [shell基础]——split命令
测试文本 # cat name1.txt name1 alvin1 name2 alvin2 name3 alvin3 name4 alvin4 此时目录下就只有这个文件 # ls name1.txt ...