Latest web development tutorials

Highcharts شجرة (Treemap)

هذا الفصل سوف نقدم Highcharts خريطة الحرارة.

في الجزء السابق ونحن نعلم بالفعل تركيب التكوين Highcharts. دعونا ننظر في Highcharts تكوينات أخرى.

شجرة

سلسلة التكوين

يتم تعيين سمة نوع سلسلة treemap، يصف العمود series.type نوع البيانات. القيمة الافتراضية هي "خط". 

var chart = {
   type: 'treemap'
};

أمثلة

اسم الملف: highcharts_tree_map.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   var title = {
      text: 'Highcharts Treemap'   
   };       
   
   var colorAxis = {
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };
   
   var series= [{
     type: "treemap",
     layoutAlgorithm: 'squarified',
     data: [{
        name: 'A',
        value: 6,
        colorValue: 1
     }, {
        name: 'B',
        value: 6,
        colorValue: 2
     }, {
        name: 'C',
        value: 4,
        colorValue: 3
     }, {
        name: 'D',
        value: 3,
        colorValue: 4
     }, {
        name: 'E',
        value: 2,
        colorValue: 5
     }, {
        name: 'F',
        value: 2,
        colorValue: 6
     }, {
        name: 'G',
        value: 1,
        colorValue: 7
     }]
   }];     
      
   var json = {};     
   json.title = title;          
   json.colorAxis = colorAxis;   
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

إخراج المثال أعلاه هو:

مستويات مختلفة من شجرة

يستخدم المثال التالي ألوان مختلفة لتحديد مستويات مختلفة من شجرة.

أمثلة

اسم الملف: highcharts_tree_levels.htm (أمثلة التعليمات البرمجية المصدر الكامل، الرجاء الضغط للعرض) 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {    
   var title = {
      text: 'Fruit consumption'   
   };        
   
   var series = [{
      type: "treemap",
      layoutAlgorithm: 'stripes',
      alternateStartingDirection: true,
      levels: [{
         level: 1,
         layoutAlgorithm: 'sliceAndDice',
         dataLabels: {
            enabled: true,
            align: 'left',
            verticalAlign: 'top',
            style: {
               fontSize: '15px',
               fontWeight: 'bold'
            }
         }
      }],
      data: [{
         id: 'A',
         name: 'Apples',
         color: "#EC2500"
      }, {
         id:'B',
         name: 'Bananas',
         color: "#ECE100"
      }, {
         id: 'O',
         name: 'Oranges',
         color: '#EC9800'
      }, {
         name: 'Anne',
         parent: 'A',
         value: 5
      }, {
         name: 'Rick',
         parent: 'A',
         value: 3
      }, {
         name: 'Peter',
         parent: 'A',
         value: 4
      }, {
         name: 'Anne',
         parent: 'B',
         value: 4
      }, {
         name: 'Rick',
         parent: 'B',
         value: 10
      }, {
         name: 'Peter',
         parent: 'B',
         value: 1
      }, {
         name: 'Anne',
         parent: 'O',
         value: 1
      }, {
         name: 'Rick',
         parent: 'O',
         value: 3
      }, {
         name: 'Peter',
         parent: 'O',
         value: 3
      }, {
         name: 'Susanne',
         parent: 'Kiwi',
         value: 2,
         color: '#9EDE00'
      }]
   }]; 
      
   var json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

إخراج المثال أعلاه هو:

كميات كبيرة من البيانات شجرة

الأمثلة التالية من اللون كمية كبيرة من شجرة البيانات، أمثلة محددة من البيانات المتاحة عن طريق النقر على "محاولة" لعرضها.

اسم الملف: highcharts_tree_largemap.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.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/modules/treemap.js"></script>    
<script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
//省略部分 js 代码
 var data = {……};
 var points = [],
		region_p,
		region_val,
		region_i,
		country_p,
		country_i,
		cause_p,
		cause_i,
		cause_name = [];
	cause_name['Communicable & other Group I'] = 'Communicable diseases';
	cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
	cause_name['Injuries'] = 'Injuries';
	region_i = 0;
	for (var region in data) {
		region_val = 0;
		region_p = {
			id: "id_" + region_i,
			name: region,
			color: Highcharts.getOptions().colors[region_i]
		};
		country_i = 0;
		for (var country in data[region]) {
			country_p = {
				id: region_p.id + "_" + country_i,
				name: country,
				parent: region_p.id
			};
			points.push(country_p);
			cause_i = 0;
			for (var cause in data[region][country]) {
				cause_p = {
					id: country_p.id + "_" + cause_i,
					name: cause_name[cause],
					parent: country_p.id,
					value: Math.round(+data[region][country][cause])
				};
				region_val += cause_p.value;
				points.push(cause_p);
				cause_i++;
			}
			country_i++;
		}
		region_p.value = Math.round(region_val / country_i);
		points.push(region_p);
		region_i++;
	}
   var chart = {
      renderTo: 'container'
   };

   var title = {
      text: 'Global Mortality Rate 2012, per 100 000 population'   
   };        
   
   var subtitle: {
      text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
   };
   
   var series = [{
      type: "treemap",
      layoutAlgorithm: 'squarified',
      allowDrillToNode: true,
      dataLabels: {
         enabled: false
      },
      levelIsConstant: false,
      levels: [{
         level: 1,
         dataLabels: {
            enabled: true
         },
      borderWidth: 3
      }],
      data: points
   }]; 
      
   var json = {};     
   json.title = title;            
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

إخراج المثال أعلاه هو: