• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'treemap',
    25.       plotarea: {
    26.         margin: '0 0 30 0'
    27.       },
    28.       options: {
    29.         tooltipGroup: {
    30.           callout: true,
    31.           calloutHeight: 15,
    32.           calloutPosition: 'bottom',
    33.           calloutWidth: 0,
    34.           calloutTip: {
    35.             type: 'circle',
    36.             backgroundColor: '#fff',
    37.             borderWidth: 2,
    38.             borderColor: '#f60',
    39.             offsetY: 5,
    40.             size: 5,
    41.           },
    42.         }
    43.       },
    44.       series: [{
    45.         text: 'North America',
    46.         children: [{
    47.           text: 'United States',
    48.           children: [{
    49.             text: 'Texas',
    50.             value: 21
    51.           }, {
    52.             text: 'California',
    53.             value: 53
    54.           }, {
    55.             text: 'Ohio',
    56.             value: 12
    57.           }, {
    58.             text: 'New York',
    59.             value: 46
    60.           }, {
    61.             text: 'Michigan',
    62.             value: 39
    63.           }, {
    64.             text: 'Alabama',
    65.             value: 25
    66.           }]
    67.         }, {
    68.           text: 'Canada',
    69.           value: 113
    70.         }, {
    71.           text: 'Mexico',
    72.           value: 78
    73.         }]
    74.       }, {
    75.         text: 'Europe',
    76.         children: [{
    77.           text: 'France',
    78.           value: 42
    79.         }, {
    80.           text: 'Spain',
    81.           value: 28
    82.         }, {
    83.           text: 'Switzerland',
    84.           value: 13
    85.         }, {
    86.           text: 'Germany',
    87.           value: 56
    88.         }, {
    89.           text: 'Cyprus',
    90.           value: 7
    91.         }]
    92.       }, {
    93.         text: 'Africa',
    94.         children: [{
    95.           text: 'Egypt',
    96.           value: 22
    97.         }, {
    98.           text: 'Congo',
    99.           value: 38
    100.         }, {
    101.           text: 'Lesotho',
    102.           value: 9
    103.         }]
    104.       }, {
    105.         text: 'Asia',
    106.         children: [{
    107.           text: 'India',
    108.           value: 92
    109.         }, {
    110.           text: 'China',
    111.           value: 68
    112.         }, {
    113.           text: 'Mongolia',
    114.           value: 25
    115.         }]
    116.       }, {
    117.         text: 'South America',
    118.         children: [{
    119.           text: 'Brazil',
    120.           value: 42
    121.         }, {
    122.           text: 'Argentina',
    123.           value: 28
    124.         }, {
    125.           text: 'Peru',
    126.           value: 15
    127.         }, {
    128.           text: 'Uruguay',
    129.           value: 33
    130.         }]
    131.       }, {
    132.         text: 'Australia (continent)',
    133.         children: [{
    134.           text: 'Australia (country)',
    135.           value: 121
    136.         }, {
    137.           text: 'New Zealand',
    138.           value: 24
    139.         }]
    140.       }]
    141.     };
    142.  
    143.     zingchart.render({
    144.       id: 'myChart',
    145.       data: chartConfig,
    146.       height: '100%',
    147.       width: '100%'
    148.     });
    149.   </script>
    150. </body>
    151.  
    152. </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'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'treemap',
    3.   plotarea: {
    4.     margin: '0 0 30 0'
    5.   },
    6.   options: {
    7.     tooltipGroup: {
    8.       callout: true,
    9.       calloutHeight: 15,
    10.       calloutPosition: 'bottom',
    11.       calloutWidth: 0,
    12.       calloutTip: {
    13.         type: 'circle',
    14.         backgroundColor: '#fff',
    15.         borderWidth: 2,
    16.         borderColor: '#f60',
    17.         offsetY: 5,
    18.         size: 5,
    19.       },
    20.     }
    21.   },
    22.   series: [{
    23.     text: 'North America',
    24.     children: [{
    25.       text: 'United States',
    26.       children: [{
    27.         text: 'Texas',
    28.         value: 21
    29.       }, {
    30.         text: 'California',
    31.         value: 53
    32.       }, {
    33.         text: 'Ohio',
    34.         value: 12
    35.       }, {
    36.         text: 'New York',
    37.         value: 46
    38.       }, {
    39.         text: 'Michigan',
    40.         value: 39
    41.       }, {
    42.         text: 'Alabama',
    43.         value: 25
    44.       }]
    45.     }, {
    46.       text: 'Canada',
    47.       value: 113
    48.     }, {
    49.       text: 'Mexico',
    50.       value: 78
    51.     }]
    52.   }, {
    53.     text: 'Europe',
    54.     children: [{
    55.       text: 'France',
    56.       value: 42
    57.     }, {
    58.       text: 'Spain',
    59.       value: 28
    60.     }, {
    61.       text: 'Switzerland',
    62.       value: 13
    63.     }, {
    64.       text: 'Germany',
    65.       value: 56
    66.     }, {
    67.       text: 'Cyprus',
    68.       value: 7
    69.     }]
    70.   }, {
    71.     text: 'Africa',
    72.     children: [{
    73.       text: 'Egypt',
    74.       value: 22
    75.     }, {
    76.       text: 'Congo',
    77.       value: 38
    78.     }, {
    79.       text: 'Lesotho',
    80.       value: 9
    81.     }]
    82.   }, {
    83.     text: 'Asia',
    84.     children: [{
    85.       text: 'India',
    86.       value: 92
    87.     }, {
    88.       text: 'China',
    89.       value: 68
    90.     }, {
    91.       text: 'Mongolia',
    92.       value: 25
    93.     }]
    94.   }, {
    95.     text: 'South America',
    96.     children: [{
    97.       text: 'Brazil',
    98.       value: 42
    99.     }, {
    100.       text: 'Argentina',
    101.       value: 28
    102.     }, {
    103.       text: 'Peru',
    104.       value: 15
    105.     }, {
    106.       text: 'Uruguay',
    107.       value: 33
    108.     }]
    109.   }, {
    110.     text: 'Australia (continent)',
    111.     children: [{
    112.       text: 'Australia (country)',
    113.       value: 121
    114.     }, {
    115.       text: 'New Zealand',
    116.       value: 24
    117.     }]
    118.   }]
    119. };
    120.  
    121. zingchart.render({
    122.   id: 'myChart',
    123.   data: chartConfig,
    124.   height: '100%',
    125.   width: '100%'
    126. });