• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     const MAX = 150;
    35.     const GRAD = {
    36.       stops: '0 0.4 0.5 0.6 0.7 1',
    37.       colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
    38.     };
    39.  
    40.     let chartData = {
    41.       flat: true,
    42.       type: 'null',
    43.       backgroundColor: '#fff',
    44.       plotarea: {
    45.         margin: '25 10 10 10',
    46.       },
    47.       shapes: [{
    48.         type: 'zingchart.maps',
    49.         options: {
    50.           id: 'mapmain',
    51.           name: 'fra',
    52.           scale: true,
    53.           zooming: false,
    54.           panning: false,
    55.           scrolling: false,
    56.           style: {
    57.             flat: true,
    58.             controls: {
    59.               visible: false,
    60.             },
    61.             borderAlpha: 0.1,
    62.             borderColor: '#fff',
    63.             label: {
    64.               visible: false,
    65.               overlap: false,
    66.               text: '%long-text',
    67.             },
    68.             hoverState: {
    69.               visible: false,
    70.               backgroundColor: 'none',
    71.               shadowAlpha: 0.2,
    72.               shadowDistance: 2,
    73.               shadow: true,
    74.               shadowColor: '#333',
    75.             },
    76.           },
    77.         },
    78.       }, ],
    79.       heatmap: {
    80.         size: 5,
    81.         blur: 15,
    82.         alpha: 0.75,
    83.         minValue: 0,
    84.         maxValue: MAX,
    85.         gradientStops: GRAD.stops,
    86.         gradientColors: GRAD.colors,
    87.       },
    88.       colorScale: {
    89.         aspect: 'gradient',
    90.         gradientStops: GRAD.stops,
    91.         gradientColors: GRAD.colors,
    92.         backgroundColor: null,
    93.         alpha: 0.75,
    94.         height: '100px',
    95.         minValue: 0,
    96.         maxValue: MAX,
    97.       },
    98.     };
    99.  
    100.  
    101.     let aData = [];
    102.  
    103.     zingchart.bind('myChart', 'load', function() {
    104.       window.setInterval(function() {
    105.         let l, iIndex, fLon, fLat, iPop, aXY;
    106.         let iMaxPoints = 2 * 256;
    107.  
    108.         if (aData.length === 0) {
    109.           for (l = 0; l < iMaxPoints; l++) {
    110.             iIndex = ZC._r_(0, FR_POP_2010.length - 1);
    111.             fLon = FR_POP_2010[iIndex][0];
    112.             fLat = FR_POP_2010[iIndex][1];
    113.             iPop = FR_POP_2010[iIndex][2];
    114.             aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    115.             aData.push([aXY[0], aXY[1], MAX * Math.random()]);
    116.           }
    117.         } else {
    118.           for (l = aData.length - 1; l >= 0; l--) {
    119.             aData[l][2] = Math.min(
    120.               MAX,
    121.               aData[l][2] - MAX / 19 + (MAX / 20) * Math.random()
    122.             );
    123.             if (aData[l][2] <= 0) {
    124.               aData.splice(l, 1);
    125.             }
    126.           }
    127.           for (l = 0; l < iMaxPoints - aData.length; l++) {
    128.             iIndex = ZC._r_(0, FR_POP_2010.length - 1);
    129.             fLon = FR_POP_2010[iIndex][0];
    130.             fLat = FR_POP_2010[iIndex][1];
    131.             iPop = FR_POP_2010[iIndex][2];
    132.             aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    133.             aData.push([aXY[0], aXY[1], MAX * Math.random()]);
    134.           }
    135.         }
    136.         zingchart.exec('myChart', 'heatmap.setdata', {
    137.           data: aData,
    138.         });
    139.  
    140.       }, 15);
    141.     });
    142.  
    143.     zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    144.       if (oInfo.value !== null) {
    145.         zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    146.           graphid: oInfo.graphid,
    147.           value: oInfo.value,
    148.         });
    149.       } else {
    150.         zingchart.exec(oInfo.id, 'colorscale.clear', {
    151.           graphid: oInfo.graphid,
    152.         });
    153.       }
    154.     });
    155.  
    156.     zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    157.       zingchart.render({
    158.         id: 'myChart',
    159.         width: '100%',
    160.         height: '100%',
    161.         output: 'canvas',
    162.         data: chartData,
    163.         modules: 'heatmap,color-scale',
    164.       });
    165.     });
    166.   </script>
    167. </body>
    168.  
    169. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
    17. </body>
    18.  
    19. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. const MAX = 150;
    2. const GRAD = {
    3.   stops: '0 0.4 0.5 0.6 0.7 1',
    4.   colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
    5. };
    6.  
    7. let chartData = {
    8.   flat: true,
    9.   type: 'null',
    10.   backgroundColor: '#fff',
    11.   plotarea: {
    12.     margin: '25 10 10 10',
    13.   },
    14.   shapes: [{
    15.     type: 'zingchart.maps',
    16.     options: {
    17.       id: 'mapmain',
    18.       name: 'fra',
    19.       scale: true,
    20.       zooming: false,
    21.       panning: false,
    22.       scrolling: false,
    23.       style: {
    24.         flat: true,
    25.         controls: {
    26.           visible: false,
    27.         },
    28.         borderAlpha: 0.1,
    29.         borderColor: '#fff',
    30.         label: {
    31.           visible: false,
    32.           overlap: false,
    33.           text: '%long-text',
    34.         },
    35.         hoverState: {
    36.           visible: false,
    37.           backgroundColor: 'none',
    38.           shadowAlpha: 0.2,
    39.           shadowDistance: 2,
    40.           shadow: true,
    41.           shadowColor: '#333',
    42.         },
    43.       },
    44.     },
    45.   }, ],
    46.   heatmap: {
    47.     size: 5,
    48.     blur: 15,
    49.     alpha: 0.75,
    50.     minValue: 0,
    51.     maxValue: MAX,
    52.     gradientStops: GRAD.stops,
    53.     gradientColors: GRAD.colors,
    54.   },
    55.   colorScale: {
    56.     aspect: 'gradient',
    57.     gradientStops: GRAD.stops,
    58.     gradientColors: GRAD.colors,
    59.     backgroundColor: null,
    60.     alpha: 0.75,
    61.     height: '100px',
    62.     minValue: 0,
    63.     maxValue: MAX,
    64.   },
    65. };
    66.  
    67.  
    68. let aData = [];
    69.  
    70. zingchart.bind('myChart', 'load', function() {
    71.   window.setInterval(function() {
    72.     let l, iIndex, fLon, fLat, iPop, aXY;
    73.     let iMaxPoints = 2 * 256;
    74.  
    75.     if (aData.length === 0) {
    76.       for (l = 0; l < iMaxPoints; l++) {
    77.         iIndex = ZC._r_(0, FR_POP_2010.length - 1);
    78.         fLon = FR_POP_2010[iIndex][0];
    79.         fLat = FR_POP_2010[iIndex][1];
    80.         iPop = FR_POP_2010[iIndex][2];
    81.         aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    82.         aData.push([aXY[0], aXY[1], MAX * Math.random()]);
    83.       }
    84.     } else {
    85.       for (l = aData.length - 1; l >= 0; l--) {
    86.         aData[l][2] = Math.min(
    87.           MAX,
    88.           aData[l][2] - MAX / 19 + (MAX / 20) * Math.random()
    89.         );
    90.         if (aData[l][2] <= 0) {
    91.           aData.splice(l, 1);
    92.         }
    93.       }
    94.       for (l = 0; l < iMaxPoints - aData.length; l++) {
    95.         iIndex = ZC._r_(0, FR_POP_2010.length - 1);
    96.         fLon = FR_POP_2010[iIndex][0];
    97.         fLat = FR_POP_2010[iIndex][1];
    98.         iPop = FR_POP_2010[iIndex][2];
    99.         aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    100.         aData.push([aXY[0], aXY[1], MAX * Math.random()]);
    101.       }
    102.     }
    103.     zingchart.exec('myChart', 'heatmap.setdata', {
    104.       data: aData,
    105.     });
    106.  
    107.   }, 15);
    108. });
    109.  
    110. zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    111.   if (oInfo.value !== null) {
    112.     zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    113.       graphid: oInfo.graphid,
    114.       value: oInfo.value,
    115.     });
    116.   } else {
    117.     zingchart.exec(oInfo.id, 'colorscale.clear', {
    118.       graphid: oInfo.graphid,
    119.     });
    120.   }
    121. });
    122.  
    123. zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    124.   zingchart.render({
    125.     id: 'myChart',
    126.     width: '100%',
    127.     height: '100%',
    128.     output: 'canvas',
    129.     data: chartData,
    130.     modules: 'heatmap,color-scale',
    131.   });
    132. });