• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.  
    28.     select {
    29.       margin: 10px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <div id="myChart">
    36.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    37.     <select id="treemap-layout">
    38.       <option selected value="balanced">Balanced</option>
    39.       <option value="balancedV2">Balanced(v2)</option>
    40.       <option value="random">Random</option>
    41.       <option value="horizontal">Horizontal</option>
    42.       <option value="vertical">Vertical</option>
    43.       <option value="squarify">Squarify</option>
    44.       <option value="squarifyV2">Squarify(v2)</option>
    45.     </select>
    46.   </div>
    47.   <script>
    48.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    49.     let chartConfig = {
    50.       type: 'treemap',
    51.       options: {
    52.         splitType: 'balancedV2',
    53.         pairedChildren: 4,
    54.         colorType: 'palette',
    55.         palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
    56.       },
    57.       plotarea: {
    58.         margin: '0 0 35 0'
    59.       },
    60.       series: [{
    61.           text: 'North America',
    62.           children: [{
    63.               text: 'United States',
    64.               children: [{
    65.                 text: 'Texas',
    66.                 value: 90
    67.               }]
    68.             },
    69.             {
    70.               text: 'Canada',
    71.               value: 113
    72.             },
    73.             {
    74.               text: 'Mexico',
    75.               value: 78
    76.             }
    77.           ]
    78.         },
    79.         {
    80.           text: 'Europe',
    81.           children: [{
    82.               text: 'France',
    83.               value: 42
    84.             },
    85.             {
    86.               text: 'Spain',
    87.               value: 28
    88.             }
    89.           ]
    90.         },
    91.         {
    92.           text: 'Africa',
    93.           children: [{
    94.               text: 'Egypt',
    95.               value: 22
    96.             },
    97.             {
    98.               text: 'Congo',
    99.               value: 38
    100.             }
    101.           ]
    102.         },
    103.         {
    104.           text: 'Asia',
    105.           children: [{
    106.               text: 'India',
    107.               value: 92
    108.             },
    109.             {
    110.               text: 'China',
    111.               value: 68
    112.             }
    113.           ]
    114.         },
    115.         {
    116.           text: 'South America',
    117.           children: [{
    118.               text: 'Brazil',
    119.               value: 42
    120.             },
    121.             {
    122.               text: 'Argentina',
    123.               value: 28
    124.             }
    125.           ]
    126.         },
    127.         {
    128.           text: 'Australia (continent)',
    129.           children: [{
    130.               text: 'Australia (country)',
    131.               value: 121
    132.             },
    133.             {
    134.               text: 'New Zealand',
    135.               value: 24
    136.             }
    137.           ]
    138.         }
    139.       ]
    140.     };
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: chartConfig,
    145.       height: '100%',
    146.       width: '100%'
    147.     });
    148.  
    149.     document.getElementById('treemap-layout').addEventListener('change', function(e) {
    150.       myConfig.options['split-type'] = e.srcElement.value;
    151.       zingchart.exec('myChart', 'setdata', {
    152.         data: myConfig
    153.       });
    154.     })
    155.   </script>
    156. </body>
    157.  
    158. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.     <select id="treemap-layout">
    15.       <option selected value="balanced">Balanced</option>
    16.       <option value="balancedV2">Balanced(v2)</option>
    17.       <option value="random">Random</option>
    18.       <option value="horizontal">Horizontal</option>
    19.       <option value="vertical">Vertical</option>
    20.       <option value="squarify">Squarify</option>
    21.       <option value="squarifyV2">Squarify(v2)</option>
    22.     </select>
    23.   </div>
    24. </body>
    25.  
    26. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    18.  
    19. select {
    20.   margin: 10px;
    21. }
    1. let chartConfig = {
    2.   type: 'treemap',
    3.   options: {
    4.     splitType: 'balancedV2',
    5.     pairedChildren: 4,
    6.     colorType: 'palette',
    7.     palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
    8.   },
    9.   plotarea: {
    10.     margin: '0 0 35 0'
    11.   },
    12.   series: [{
    13.       text: 'North America',
    14.       children: [{
    15.           text: 'United States',
    16.           children: [{
    17.             text: 'Texas',
    18.             value: 90
    19.           }]
    20.         },
    21.         {
    22.           text: 'Canada',
    23.           value: 113
    24.         },
    25.         {
    26.           text: 'Mexico',
    27.           value: 78
    28.         }
    29.       ]
    30.     },
    31.     {
    32.       text: 'Europe',
    33.       children: [{
    34.           text: 'France',
    35.           value: 42
    36.         },
    37.         {
    38.           text: 'Spain',
    39.           value: 28
    40.         }
    41.       ]
    42.     },
    43.     {
    44.       text: 'Africa',
    45.       children: [{
    46.           text: 'Egypt',
    47.           value: 22
    48.         },
    49.         {
    50.           text: 'Congo',
    51.           value: 38
    52.         }
    53.       ]
    54.     },
    55.     {
    56.       text: 'Asia',
    57.       children: [{
    58.           text: 'India',
    59.           value: 92
    60.         },
    61.         {
    62.           text: 'China',
    63.           value: 68
    64.         }
    65.       ]
    66.     },
    67.     {
    68.       text: 'South America',
    69.       children: [{
    70.           text: 'Brazil',
    71.           value: 42
    72.         },
    73.         {
    74.           text: 'Argentina',
    75.           value: 28
    76.         }
    77.       ]
    78.     },
    79.     {
    80.       text: 'Australia (continent)',
    81.       children: [{
    82.           text: 'Australia (country)',
    83.           value: 121
    84.         },
    85.         {
    86.           text: 'New Zealand',
    87.           value: 24
    88.         }
    89.       ]
    90.     }
    91.   ]
    92. };
    93.  
    94. zingchart.render({
    95.   id: 'myChart',
    96.   data: chartConfig,
    97.   height: '100%',
    98.   width: '100%'
    99. });
    100.  
    101. document.getElementById('treemap-layout').addEventListener('change', function(e) {
    102.   myConfig.options['split-type'] = e.srcElement.value;
    103.   zingchart.exec('myChart', 'setdata', {
    104.     data: myConfig
    105.   });
    106. })