hightCharts制作三维立体图

接上一篇，我感觉hightCharts比eCharts好用，官方文档也贼6；

hightCharts官方文档地址:https://api.hcharts.cn/highcharts

感觉eCharts就是hightCharts的山寨，建议看不懂eCharts文档的可以先看hightCharts。

图片来源官方文档

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hightCharts使用</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>
</head>
<body>
	<div id="container" style="width:550px;height:400px;margin:0 auto;"></div>

	<script type="text/javascript">
		$(document).ready(function(){
			var title = {
				text: '月平均气温'
			}
			var subtitle = {
				text:'Source: runoob.com'
			}
			var xAxis = {
				categories: [
                   '一月', '二月', '三月', '四月', '五月', '六月'
      ,'七月', '八月', '九月', '十月', '十一月', '十二月'
				]
			}

			var yAxis = {
				title: {
					text: 'tetxt'
				},
				plotLines: [{
					value:0,
					width:1,
					color:'#808080'
				}]
			};

			var tooltip = {
				valueSuffix:'\xB0C'
			}
			var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
    var series =  [
      {
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
            26.5, 23.3, 18.3, 13.9, 9.6]
      }, 
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
            24.1, 20.1, 14.1, 8.6, 2.5]
      }, 
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
            17.9, 14.3, 9.0, 3.9, 1.0]
      }, 
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
            16.6, 14.2, 10.3, 6.6, 4.8]
      }
   ];
   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;

   $('#container').highcharts(json);
		})
	</script>
</body>
</html>

效果图

下面就开始做3d图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hightCharts使用</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 min="0" max="45" value="15" type="range" id="R1"><span id="R1-value" class="value"></span></td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		$(document).ready(function(){
		   var chart = {
		   	 renderTo:'container',
		   	 type:'column',
		   	 margin:75,
		   	 options3d: {
		   	 	enabled: true, //显示图表是否设置为3d，true就表示设置为3d
		   	 	alpha:15, //图表视图旋转角度
		   	 	beta:15,//图表视图旋转角度
		   	 	depth:50,//图表的合计深度，默认为100
		   	 	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>

效果图

注意：因为是3d效果，我们必须引用highcharts-3d.js

下面是3d饼状图

<html>
<head>
<meta charset="UTF-8" />
<title>2018年春季招聘</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: '2018 年春招各网站比例'   
   };   
   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: 'Website',
            data: [
                ['baidu',   45.0],
                ['360',       26.8],
                {
                    name: 'google',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Sina',    8.5],
                ['bilibili',     6.2],
                ['wangyi',   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>

3d圆环图

<html>
<head>
<meta charset="UTF-8" />
<title>前端知识</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: [
            ['html,html5', 8],
            ['css,css3', 3],
            ['js', 1],
            ['jquery', 6],
            ['vue.js', 8],
            ['ajax', 4]
         ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.subtitle = subtitle; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

3d堆叠柱状图

<html>
<head>
<meta charset="UTF-8" />
<title>水果</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>

这篇就到此为止，明天看动态图

hightCharts制作三维立体图

猜你喜欢