• 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.   <button id="zi">ZoomIn</button>
    15.   <button id="zo">ZoomOut</button>
    16.   <button id="zt">ZoomTo</button>
    17.   <button id="zti">ZoomToItem</button>
    18.   <button id="va">ViewAll</button>
    19.   <script>
    20.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    21.     zingchart.loadModules('maps, maps-gbrL2', function(e) {
    22.       zingchart.render({
    23.         id: 'myChart',
    24.         data: {
    25.           shapes: [{
    26.             type: 'zingchart.maps',
    27.             options: {
    28.               name: 'gbrL2',
    29.               style: {
    30.                 controls: {
    31.                   visible: false
    32.                 }
    33.               }
    34.             }
    35.           }]
    36.         },
    37.         height: 500,
    38.         width: 725
    39.       });
    40.     });
    41.  
    42.     // zingchart.maps.zoomIn(mapId);
    43.     document.getElementById('zi').addEventListener('click', function(e) {
    44.       zingchart.maps.zoomIn('gbrL2');
    45.     });
    46.  
    47.     // zingchart.maps.zoomOut(mapId);
    48.     document.getElementById('zo').addEventListener('click', function(e) {
    49.       zingchart.maps.zoomOut('gbrL2');
    50.     });
    51.  
    52.     // zingchart.maps.zoomTo(mapId, {zoom:zoom, offsetX:offsetX, offsetY:offsetY});
    53.     document.getElementById('zt').addEventListener('click', function(e) {
    54.       zingchart.maps.zoomTo('gbrL2', {
    55.         zoom: 3,
    56.         offsetX: 222,
    57.         offsetY: 111
    58.       });
    59.     });
    60.  
    61.     // zingchart.maps.zoomToItem(mapId, itemId);
    62.     document.getElementById('zti').addEventListener('click', function(e) {
    63.       zingchart.maps.zoomToItem('gbrL2', 'HR'); // harrow
    64.     });
    65.  
    66.     // zingchart.maps.viewAll('chn');
    67.     document.getElementById('va').addEventListener('click', function(e) {
    68.       zingchart.maps.viewAll('gbrL2');
    69.     });
    70.   </script>
    71. </body>
    72.  
    73. </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.   <button id="zi">ZoomIn</button>
    14.   <button id="zo">ZoomOut</button>
    15.   <button id="zt">ZoomTo</button>
    16.   <button id="zti">ZoomToItem</button>
    17.   <button id="va">ViewAll</button>
    18. </body>
    19.  
    20. </html>
    1.  
    1. zingchart.loadModules('maps, maps-gbrL2', function(e) {
    2.   zingchart.render({
    3.     id: 'myChart',
    4.     data: {
    5.       shapes: [{
    6.         type: 'zingchart.maps',
    7.         options: {
    8.           name: 'gbrL2',
    9.           style: {
    10.             controls: {
    11.               visible: false
    12.             }
    13.           }
    14.         }
    15.       }]
    16.     },
    17.     height: 500,
    18.     width: 725
    19.   });
    20. });
    21.  
    22. // zingchart.maps.zoomIn(mapId);
    23. document.getElementById('zi').addEventListener('click', function(e) {
    24.   zingchart.maps.zoomIn('gbrL2');
    25. });
    26.  
    27. // zingchart.maps.zoomOut(mapId);
    28. document.getElementById('zo').addEventListener('click', function(e) {
    29.   zingchart.maps.zoomOut('gbrL2');
    30. });
    31.  
    32. // zingchart.maps.zoomTo(mapId, {zoom:zoom, offsetX:offsetX, offsetY:offsetY});
    33. document.getElementById('zt').addEventListener('click', function(e) {
    34.   zingchart.maps.zoomTo('gbrL2', {
    35.     zoom: 3,
    36.     offsetX: 222,
    37.     offsetY: 111
    38.   });
    39. });
    40.  
    41. // zingchart.maps.zoomToItem(mapId, itemId);
    42. document.getElementById('zti').addEventListener('click', function(e) {
    43.   zingchart.maps.zoomToItem('gbrL2', 'HR'); // harrow
    44. });
    45.  
    46. // zingchart.maps.viewAll('chn');
    47. document.getElementById('va').addEventListener('click', function(e) {
    48.   zingchart.maps.viewAll('gbrL2');
    49. });