Highcharts 3D柱形图

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {

   type: 'column',

   options3d: {

         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true

         alpha: 15,         //图表视图旋转角度

         beta: 15,          //图表视图旋转角度

         depth: 50,         //图表的合计深度，默认为100

         viewDistance: 25   //定义图表的浏览长度

   }

};

实例

文件名：highcharts_3d_column.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<div id="sliders">

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

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      renderTo: 'container',

      type: 'column',

      margin: 75,

      options3d: {

         enabled: true,

         alpha: 15,

         beta: 15,

         depth: 50,

         viewDistance: 25

      }

   };

   var title = {

      text: '图表旋转实例'

   };

   var subtitle = {

      text: '通过拖动下面的滑块测试'

   };

   var plotOptions = {

      column: {

         depth: 25

      }

   };

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

   }];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.subtitle = subtitle;

   json.series = series;

   json.plotOptions = plotOptions;

   var highchart = new Highcharts.Chart(json);

   function showValues() {

      $('#R0-value').html(highchart.options.chart.options3d.alpha);

      $('#R1-value').html(highchart.options.chart.options3d.beta);

   }

   // Activate the sliders

   $('#R0').on('change', function () {

      highchart.options.chart.options3d.alpha = this.value;

      showValues();

      highchart.redraw(false);

   });

   $('#R1').on('change', function () {

      highchart.options.chart.options3d.beta = this.value;

      showValues();

      highchart.redraw(false);

   });

   showValues();

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

 

Highcharts 带空值(null)和0的3D柱形图

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {

   type: 'column',

   options3d: {

         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true

         alpha: 15,         //图表视图旋转角度

         beta: 15,          //图表视图旋转角度

         depth: 50,         //图表的合计深度，默认为100

         viewDistance: 25   //定义图表的浏览长度

   }

};

实例

文件名：highcharts_3d_column_null.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'column',

      margin: 75,

      options3d: {

         enabled: true,

         alpha: 10,

         beta: 25,

         depth: 70

      }

   };

   var title = {

      text: '带空值的 3D 图'

   };

   var subtitle = {

      text: '注意 0 和 null 的区别'

   };

   var xAxis = {

      categories: Highcharts.getOptions().lang.shortMonths

   };

   var yAxis = {

      title: {

         text: null

      }

   };

   var series= [{

      name: 'Sales',

      data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]

   }];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.subtitle = subtitle;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

Highcharts 堆叠3D柱形图

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。

var chart = {

   type: 'column',

   options3d: {

         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true

         alpha: 15,         //图表视图旋转角度

         beta: 15,          //图表视图旋转角度

         depth: 50,         //图表的合计深度，默认为100

         viewDistance: 25   //定义图表的浏览长度

   }

};

实例

文件名：highcharts_3d_stacking.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'column',

      marginTop: 80,

      marginRight: 40,

      options3d: {

         enabled: true,

         alpha: 15,

         beta: 15,

         viewDistance: 25,

         depth: 40

      }

   };

   var title = {

      text: '水果总消费量，按类别分组'

   };

   var xAxis = {

      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

   };

   var yAxis = {

      allowDecimals: false,

      min: 0,

      title: {

         text: '水果数量'

      }

   };  

   var tooltip = {

      headerFormat: '<b>{point.key}</b><br>',

      pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'

   };

   var plotOptions = {

      column: {

         stacking: 'normal',

         depth: 40

      }

   };

   var series= [{

         name: 'John',

            data: [5, 3, 4, 7, 2],

            stack: 'male'

         }, {

            name: 'Joe',

            data: [3, 4, 4, 2, 5],

            stack: 'male'

         }, {

            name: 'Jane',

            data: [2, 5, 6, 2, 1],

            stack: 'female'

         }, {

            name: 'Janet',

            data: [3, 0, 4, 4, 3],

            stack: 'female'

   }];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.xAxis = xAxis;

   json.yAxis = yAxis;

   json.tooltip = tooltip;

   json.plotOptions = plotOptions;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

Highcharts 3D饼图

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。

var chart = {

   type: 'pie',

   options3d: {

         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true

         alpha: 15,         //图表视图旋转角度

         beta: 15,          //图表视图旋转角度

         depth: 50,         //图表的合计深度，默认为100

         viewDistance: 25   //定义图表的浏览长度

   }

};

实例

文件名：highcharts_3d_pie.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'pie',

      options3d: {

         enabled: true,

         alpha: 45,

         beta: 0

      }

   };

   var title = {

      text: '2014 年特定网站各浏览器占有率'

   };

   var tooltip = {

      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

   };

   var plotOptions = {

      pie: {

          allowPointSelect: true,

          cursor: 'pointer',

          depth: 35,

          dataLabels: {

             enabled: true,

             format: '{point.name}'

          }

      }

   };

   var series= [{

         type: 'pie',

            name: 'Browser share',

            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]

            ]

   }];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.tooltip = tooltip;

   json.plotOptions = plotOptions;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

Highcharts 3D圆环图

配置

chart.options3d 配置

以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。

var chart = {

   type: 'pie',

   options3d: {

         enabled: true,     //显示图表是否设置为3D， 我们将其设置为 true

         alpha: 15,         //图表视图旋转角度

         beta: 15,          //图表视图旋转角度

         depth: 50,         //图表的合计深度，默认为100

         viewDistance: 25   //定义图表的浏览长度

   }

};

plotOptions.pie.innerSize

plotOptions.pie.innerSize 用于绘制饼状图时，饼状图的圆心预留多大的空白。

plotOptions.pie.depth

3D饼图的厚度。

plotOptions: {

   pie: {

      innerSize: 100,

      depth: 45

   }

},

实例

文件名：highcharts_3d_donut.htm

<html>

<head>

<meta charset="UTF-8" />

<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

$(document).ready(function() {

   var chart = {

      type: 'pie',

      options3d: {

         enabled: true,

         alpha: 45

      }

   };

   var title = {

      text: '每周水果配送量'

   };

   var subtitle = {

      text: 'Highcharts 3D圆环图'

   };  

   var plotOptions = {

      pie: {

         innerSize: 100,

         depth: 45

      }

   };

   var series= [{

         name: '配送量',

         data: [

            ['Bananas', 8],

            ['Kiwi', 3],

            ['Mixed nuts', 1],

            ['Oranges', 6],

            ['Apples', 8],

            ['Pears', 4],

            ['Clementines', 4],

            ['Reddish (bag)', 1],

            ['Grapes (bunch)', 1]

         ]

   }];     

   var json = {};

   json.chart = chart;

   json.title = title;

   json.subtitle = subtitle;

   json.plotOptions = plotOptions;

   json.series = series;

   $('#container').highcharts(json);

});

</script>

</body>

</html>

尝试一下 »

以上实例输出结果为：

 
 

 
 
 
 
 
 
 
 
 
 

Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图的更多相关文章

  1. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  2. highcharts中放aqi及6要素，再加上气象5要素的图

    var chart = Highcharts.chart('container', { chart: { zoomType: 'xy' }, title: { text: '东京月平均天气数据' }, ...

  3. Highcharts 饼图数值显示在图形上

    1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...

  4. paper 157：文章解读--How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D facial landmarks)

    文章:How far are we from solving the 2D & 3D Face Alignment problem?-(and a dataset of 230,000 3D ...

  5. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  6. UI和3D物体的堆叠响应

    一.问题:当3D物体和UI元素重叠显示时一般UI元素会遮挡物体,这时点击UI元素响应时UI后方的物体也会响应. private void OnMouseDown() { ChangeColor(); ...

  7. RoboCup仿真3D TC笔记（2014年合肥中国公开赛 仿真3D比赛环境搭建）

    所谓“TC“,就是Technology Committee(技术委员),讲的好像很厉害,实则就一“网管”. TC的技术含量其实不高,但是涉及的东西很多很杂,网上零零散散的都有,在这里我想总的整理一下, ...

  8. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  9. d3.js实现柱形图，饼图以及折现图

    饼图 var width = 500; var height = 500; //处理数据 var dataset = [ 30 , 10 , 43 , 55 , 13 ]; var pie = d3. ...

随机推荐

  1. 300. Longest Increasing Subsequence(LIS最长递增子序列 动态规划)

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  2. splay伸展树模板

      普通版本: struct SplayTree { ; ], key[maxn], val[maxn], sz[maxn], lz[maxn], fa[maxn]; , ) { ch[x][]=ch ...

  3. 关于hibernate插入数据到mysql数据库中文乱码问题的解决

    要想解决这个问题就要找到问题的症结所在 1.首先将数据提交到action输出看action里的数据是不是中文乱码,结果很遗憾并不是这里的问题 2.设置数据库连接url: 3.打开mysql安装文件里的 ...

  4. 带你走进ajax(2)

    ajax原理介绍 传统的web应用 传统的web应用是客户端向服务器发送一个http请求后,客户端要一直等待服务器的响应,这时用户什么事也干不成. 最麻烦的是对于表单的提交.比如用户要填写用户信息,等 ...

  5. 字符编码的发展（ASCII、Unicode、utf-8）

    最近一直在看廖雪峰老师的python网上教程,python内容简单易理解,就没整理,但是字符串编码作为一直困扰自己的问题,看了几遍文章,最终还是将其整理如下,本篇博客总结自廖雪峰老师的网上教程:htt ...

  6. mac/linux查询网络端口占用

    参考:http://www.cnblogs.com/kaiye/archive/2013/05/25/3099393.html netstat命令 netstat -an|grep 8080 lsof ...

  7. python3 使用opencv 画基本图形

    在Python3 环境下安装opencv-python 后练习画基本图形: import numpy as np import cv2 # BGR format GREEN = (0, 255, 0) ...

  8. javascript 判断数据类型的几种方法

    javascript 判断数据类型的几种方法一.typeof 直接返回数据类型字段,但是无法判断数组.null.对象 typeof 1 "number" typeof NaN &q ...

  9. 0ctf2017-pages-choices

    Pages 题目来自于CCS 2016 <Prefetch Side-Channel Attacks: Bypassing SMAP and Kernel ASLR>,利用intel pr ...

  10. 置顶，置低实现与window.scroll

    //置顶,置低实现 $('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 300);}); $('# ...