码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-11-28 14:18:52      阅读：220      评论：0      收藏：0      [点我收藏+]

标签：for   ide   header   article   share   data   oranges   nbsp   others   

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柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

标签：for   ide   header   article   share   data   oranges   nbsp   others   

原文地址：http://www.cnblogs.com/xuaijun/p/7909424.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！