Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

『心向阳﹡无所惧』 2024-11-01 17:36:53 原文

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圆环图的更多相关文章

HighCharts之2D圆环图
HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...
highcharts中放aqi及6要素，再加上气象5要素的图
var chart = Highcharts.chart('container', { chart: { zoomType: 'xy' }, title: { text: '东京月平均天气数据' }, ...
Highcharts 饼图数值显示在图形上
1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...
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 ...
在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图
开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...
UI和3D物体的堆叠响应
一.问题:当3D物体和UI元素重叠显示时一般UI元素会遮挡物体,这时点击UI元素响应时UI后方的物体也会响应. private void OnMouseDown() { ChangeColor(); ...
RoboCup仿真3D TC笔记（2014年合肥中国公开赛仿真3D比赛环境搭建）
所谓“TC“,就是Technology Committee(技术委员),讲的好像很厉害,实则就一“网管”. TC的技术含量其实不高,但是涉及的东西很多很杂,网上零零散散的都有,在这里我想总的整理一下, ...
2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
d3.js实现柱形图，饼图以及折现图
饼图 var width = 500; var height = 500; //处理数据 var dataset = [ 30 , 10 , 43 , 55 , 13 ]; var pie = d3. ...

随机推荐

以About Us为范例在Zen cart中增加页面
1.在includes\languages\english\html_includes目录中新建文件define_about_us.php 2.在includes\templates\Your_tem ...
hive报错汇总
1.需要注意的是,要在namenode(超级用户)上操作,貌似是 hive> insert into table record_partition partition(trancation_da ...
SpringSource Tool Suite (STS)无法启动问题
修改STS.ini,指定一个JRE路径: -vmD:\Program\Java\jdk1.7.0_79\bin\javaw.exe-startupplugins/org.eclipse.equinox ...
python单元测试框架——pytest
官网:https://docs.pytest.org/en/latest/ pytest帮你写出更好的程序 1.An example of a simple test:(一个简单的例子),命名为tes ...
AVAudioSession(4)：响应音频中断事件
本文转自:AVAudioSession(4):响应音频中断事件 | www.samirchen.com 本文内容主要来源于 Responding to Interruptions. 当一个音频中断到来 ...
OpenStack之Glance模块
一.Glance服务 1.Glance架构 Glance架构是一个典型的CS架构,提供的也是标准的Rest接口,各个layer分层也是很清楚的. 2.Glance服务 Glance是OpenStack ...
20145331 《Java程序设计》第2次实验报告
20145331 <Java程序设计>第2次实验报告实验二 Java面向对象程序设计一.实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步 ...
README.android
Default (and possibly architecture dependents) HAL modules go here. libhardware.so eventually should ...
采用OpenReplicator解析MySQL binlog
Open Replicator是一个用Java编写的MySQL binlog分析程序.Open Replicator 首先连接到MySQL(就像一个普通的MySQL Slave一样),然后接收和分析b ...
在linux上使用tomcat服务器图片验证码不显示问题
背景描述:在liunx系统上,使用tomcat中间件,访问web项目,登录页面的图片验证码显示不出来,但是在window系统上可以正常显示解决方案:设置一下这个文件tomcat/bin/catali ...