首页 | 简单教程,简单编程

代码编辑器：

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/treemap.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/heatmap.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>   
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 options = {};

options.title = title;
options.series = series;

var chart = Highcharts.chart('container',options);
</script>

代码编辑器：

运行结果：