|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highcharts Example</title>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <style type="text/css">
- #container {
- min-width: 300px;
- max-width: 600px;
- margin: 0 auto;
- }
- </style>
- <script type="text/javascript">
- $(function () {
- $('#container').highcharts({
- 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'
- }]
- }],
- title: {
- text: 'Fruit consumption'
- }
- });
- });
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/modules/treemap.js"></script>
- <div id="container"></div>
- </body>
- </html>
|
