Highcharts 不同等級樹狀圖
阿新 • • 發佈:2019-01-12
一 程式碼
<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>
二 執行結果