• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     zingchart.loadModules('maps, maps-usa_ak', function(e) {
    17.       zingchart.render({
    18.         id: 'myChart',
    19.         data: {
    20.           shapes: [{
    21.             type: 'zingchart.maps',
    22.             options: {
    23.               name: 'usa_ak',
    24.               style: {
    25.                 controls: {
    26.                   placement: 'tr', //tl (default), tr, bl, br
    27.                   visible: true,
    28.  
    29.                   zoomIn: {
    30.                     backgroundColor: '#B3E5FC',
    31.                     borderColor: '#03A9F4',
    32.                     borderWidth: 1,
    33.                     fontColor: '#03A9F4',
    34.                     fontSize: 20,
    35.                     lineStyle: 'solid',
    36.                     padding: 5,
    37.  
    38.                     tooltip: {
    39.                       text: 'Zoom In Tooltip',
    40.  
    41.                       backgroundColor: '#A7FFEB',
    42.                       borderColor: '#00BFA5',
    43.                       borderWidth: 1,
    44.                       fontColor: '#00BFA5',
    45.                       fontFamily: 'Georgia',
    46.                       lineStyle: 'solid',
    47.                       padding: 5
    48.                     }
    49.                   },
    50.                   zoomOut: {
    51.                     backgroundColor: '#B3E5FC',
    52.                     borderColor: '#03A9F4',
    53.                     borderWidth: 1,
    54.                     fontColor: '#03A9F4',
    55.                     fontSize: 20,
    56.                     lineStyle: 'solid',
    57.                     padding: 5,
    58.  
    59.                     tooltip: {
    60.                       text: 'Zoom Out Tooltip',
    61.  
    62.                       backgroundColor: '#A7FFEB',
    63.                       borderColor: '#00BFA5',
    64.                       borderWidth: 1,
    65.                       fontColor: '#00BFA5',
    66.                       fontFamily: 'Georgia',
    67.                       lineStyle: 'solid',
    68.                       padding: 5
    69.                     }
    70.                   }
    71.                 }
    72.               },
    73.  
    74.             }
    75.           }]
    76.         },
    77.         height: 400,
    78.         width: '100%'
    79.       });
    80.  
    81.     });
    82.   </script>
    83. </body>
    84.  
    85. </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.  
    1. zingchart.loadModules('maps, maps-usa_ak', function(e) {
    2.   zingchart.render({
    3.     id: 'myChart',
    4.     data: {
    5.       shapes: [{
    6.         type: 'zingchart.maps',
    7.         options: {
    8.           name: 'usa_ak',
    9.           style: {
    10.             controls: {
    11.               placement: 'tr', //tl (default), tr, bl, br
    12.               visible: true,
    13.  
    14.               zoomIn: {
    15.                 backgroundColor: '#B3E5FC',
    16.                 borderColor: '#03A9F4',
    17.                 borderWidth: 1,
    18.                 fontColor: '#03A9F4',
    19.                 fontSize: 20,
    20.                 lineStyle: 'solid',
    21.                 padding: 5,
    22.  
    23.                 tooltip: {
    24.                   text: 'Zoom In Tooltip',
    25.  
    26.                   backgroundColor: '#A7FFEB',
    27.                   borderColor: '#00BFA5',
    28.                   borderWidth: 1,
    29.                   fontColor: '#00BFA5',
    30.                   fontFamily: 'Georgia',
    31.                   lineStyle: 'solid',
    32.                   padding: 5
    33.                 }
    34.               },
    35.               zoomOut: {
    36.                 backgroundColor: '#B3E5FC',
    37.                 borderColor: '#03A9F4',
    38.                 borderWidth: 1,
    39.                 fontColor: '#03A9F4',
    40.                 fontSize: 20,
    41.                 lineStyle: 'solid',
    42.                 padding: 5,
    43.  
    44.                 tooltip: {
    45.                   text: 'Zoom Out Tooltip',
    46.  
    47.                   backgroundColor: '#A7FFEB',
    48.                   borderColor: '#00BFA5',
    49.                   borderWidth: 1,
    50.                   fontColor: '#00BFA5',
    51.                   fontFamily: 'Georgia',
    52.                   lineStyle: 'solid',
    53.                   padding: 5
    54.                 }
    55.               }
    56.             }
    57.           },
    58.  
    59.         }
    60.       }]
    61.     },
    62.     height: 400,
    63.     width: '100%'
    64.   });
    65.  
    66. });