Highcharts 不同等级树状图

一代码
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts实现不同等级树状图</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: '水果消费'
   };

   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: '苹果',
         color: "#EC2500"
      }, {
         id:'B',
         name: '香蕉',
         color: "#ECE100"
      }, {
         id: 'O',
         name: '橘子',
         color: '#EC9800'
      }, {
         name: '小红',
         parent: 'A',
         value: 5
      }, {
         name: '小程',
         parent: 'A',
         value: 3
      }, {
         name: '小马',
         parent: 'A',
         value: 4
      }, {
         name: '小红',
         parent: 'B',
         value: 4
      }, {
         name: '小程',
         parent: 'B',
         value: 10
      }, {
         name: '小马',
         parent: 'B',
         value: 1
      }, {
         name: '小红',
         parent: 'O',
         value: 1
      }, {
         name: '小程',
         parent: 'O',
         value: 3
      }, {
         name: '小马',
         parent: 'O',
         value: 3
      }, {
         name: '小林',
         parent: 'Kiwi',
         value: 2,
         color: '#9EDE00'
      }]
   }];

   var json = {};
   json.title = title;
   json.series = series;

   $('#container').highcharts(json);
});
</script>
</body>
</html>
二运行结果
Highcharts 不同等级树状图

猜你喜欢
