• Edit
  • Download
    1. <!DOCTYPE html>
    2. <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.   <script nonce="undefined">
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15.   <style>
    16.     body {
    17.       margin: 10px;
    18.       padding: 10px;
    19.     }
    20.  
    21.     *,
    22.     input,
    23.     button,
    24.     select,
    25.     textarea,
    26.     label {
    27.       font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    28.     }
    29.   </style>
    30. </head>
    31.  
    32. <body>
    33.   <div id="myChart"></div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     let chartConfig = {
    37.       type: 'radar',
    38.       heatmap: {
    39.         alpha: 1,
    40.         async: false,
    41.         blur: 20,
    42.         brushType: 'circle',
    43.         composite: true,
    44.         graph: {
    45.           keyScale: 'scale-k',
    46.           valScale: 'scale-v'
    47.         },
    48.         size: '10px',
    49.         tooltip: {
    50.           decimals: 1,
    51.  
    52.           backgroundColor: '#f90',
    53.           borderColor: '#f60',
    54.           borderRadius: -5,
    55.           borderWidth: 2,
    56.           callout: true,
    57.           calloutHeight: 20,
    58.           calloutPosition: 'bottom',
    59.           calloutWidth: 0,
    60.           padding: 10,
    61.           shadow: true,
    62.           calloutTip: {
    63.             type: 'circle',
    64.             backgroundColor: '#fff',
    65.             borderWidth: 2,
    66.             borderColor: '#f60',
    67.             size: 5,
    68.             offsetY: 5,
    69.           }
    70.         },
    71.       },
    72.       plotarea: {
    73.         margin: '10px'
    74.       },
    75.       scale: {
    76.         sizeFactor: 0.9
    77.       },
    78.       scaleV: {
    79.         values: '0:100:25',
    80.         offsetStart: '40px',
    81.         offsetEnd: 0
    82.       },
    83.       scaleK: {
    84.         values: '0:355:5',
    85.         aspect: 'circle',
    86.         maxItems: 12,
    87.         offset: 0,
    88.       },
    89.       tooltip: {},
    90.       plot: {},
    91.       series: [{}]
    92.     };
    93.  
    94.     let MAX = 100;
    95.     let aData = [];
    96.     zingchart.bind('myChart', 'load', function() {
    97.       window.setInterval(function() {
    98.         let l, k, v;
    99.         let iMaxPoints = 512;
    100.         if (aData.length === 0) {
    101.           for (l = 0; l < iMaxPoints; l++) {
    102.             k = 5 * Math.round(ZC._r_(0, 355) / 5);
    103.             v = 5 * Math.round(ZC._r_(10, 100) / 5);
    104.             aData.push([k, v, MAX * Math.random()]);
    105.           }
    106.         } else {
    107.           for (l = aData.length - 1; l >= 0; l--) {
    108.             aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
    109.             if (aData[l][2] <= 0) {
    110.               aData.splice(l, 1);
    111.             }
    112.           }
    113.           for (l = 0; l < iMaxPoints - aData.length; l++) {
    114.             k = 5 * Math.round(ZC._r_(0, 355) / 5);
    115.             v = 5 * Math.round(ZC._r_(10, 100) / 5);
    116.             aData.push([k, v, MAX * Math.random()]);
    117.           }
    118.         }
    119.         zingchart.exec('myChart', 'heatmap.setdata', {
    120.           data: aData
    121.         });
    122.       }, 15);
    123.     });
    124.  
    125.     zingchart.loadModules('heatmap', function() {
    126.       zingchart.render({
    127.         id: 'myChart',
    128.         width: 500,
    129.         height: 500,
    130.         output: 'svg',
    131.         data: chartConfig,
    132.         modules: 'heatmap,color-scale'
    133.       });
    134.     });
    135.   </script>
    136. </body>
    137.  
    138. </html>
    1. <!DOCTYPE html>
    2. <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.   <script>
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15. </head>
    16.  
    17. <body>
    18.   <div id="myChart"></div>
    19. </body>
    20.  
    21. </html>
    1. body {
    2.   margin: 10px;
    3.   padding: 10px;
    4. }
    5.  
    6. *,
    7. input,
    8. button,
    9. select,
    10. textarea,
    11. label {
    12.   font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    13. }
    1. let chartConfig = {
    2.   type: 'radar',
    3.   heatmap: {
    4.     alpha: 1,
    5.     async: false,
    6.     blur: 20,
    7.     brushType: 'circle',
    8.     composite: true,
    9.     graph: {
    10.       keyScale: 'scale-k',
    11.       valScale: 'scale-v'
    12.     },
    13.     size: '10px',
    14.     tooltip: {
    15.       decimals: 1,
    16.  
    17.       backgroundColor: '#f90',
    18.       borderColor: '#f60',
    19.       borderRadius: -5,
    20.       borderWidth: 2,
    21.       callout: true,
    22.       calloutHeight: 20,
    23.       calloutPosition: 'bottom',
    24.       calloutWidth: 0,
    25.       padding: 10,
    26.       shadow: true,
    27.       calloutTip: {
    28.         type: 'circle',
    29.         backgroundColor: '#fff',
    30.         borderWidth: 2,
    31.         borderColor: '#f60',
    32.         size: 5,
    33.         offsetY: 5,
    34.       }
    35.     },
    36.   },
    37.   plotarea: {
    38.     margin: '10px'
    39.   },
    40.   scale: {
    41.     sizeFactor: 0.9
    42.   },
    43.   scaleV: {
    44.     values: '0:100:25',
    45.     offsetStart: '40px',
    46.     offsetEnd: 0
    47.   },
    48.   scaleK: {
    49.     values: '0:355:5',
    50.     aspect: 'circle',
    51.     maxItems: 12,
    52.     offset: 0,
    53.   },
    54.   tooltip: {},
    55.   plot: {},
    56.   series: [{}]
    57. };
    58.  
    59. let MAX = 100;
    60. let aData = [];
    61. zingchart.bind('myChart', 'load', function() {
    62.   window.setInterval(function() {
    63.     let l, k, v;
    64.     let iMaxPoints = 512;
    65.     if (aData.length === 0) {
    66.       for (l = 0; l < iMaxPoints; l++) {
    67.         k = 5 * Math.round(ZC._r_(0, 355) / 5);
    68.         v = 5 * Math.round(ZC._r_(10, 100) / 5);
    69.         aData.push([k, v, MAX * Math.random()]);
    70.       }
    71.     } else {
    72.       for (l = aData.length - 1; l >= 0; l--) {
    73.         aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
    74.         if (aData[l][2] <= 0) {
    75.           aData.splice(l, 1);
    76.         }
    77.       }
    78.       for (l = 0; l < iMaxPoints - aData.length; l++) {
    79.         k = 5 * Math.round(ZC._r_(0, 355) / 5);
    80.         v = 5 * Math.round(ZC._r_(10, 100) / 5);
    81.         aData.push([k, v, MAX * Math.random()]);
    82.       }
    83.     }
    84.     zingchart.exec('myChart', 'heatmap.setdata', {
    85.       data: aData
    86.     });
    87.   }, 15);
    88. });
    89.  
    90. zingchart.loadModules('heatmap', function() {
    91.   zingchart.render({
    92.     id: 'myChart',
    93.     width: 500,
    94.     height: 500,
    95.     output: 'svg',
    96.     data: chartConfig,
    97.     modules: 'heatmap,color-scale'
    98.   });
    99. });