• 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.  
    17.     .info {
    18.       padding: 1rem 0 0;
    19.       background: #fff;
    20.       box-sizing: border-box;
    21.     }
    22.  
    23.     .control-bar {
    24.       margin: 0 auto;
    25.       padding: 0 0 1rem;
    26.       display: flex;
    27.       align-items: center;
    28.       justify-content: center;
    29.     }
    30.  
    31.     .control-bar.loaded {
    32.       display: flex !important;
    33.       opacity: 1;
    34.     }
    35.  
    36.     .control-bar>div {
    37.       display: flex;
    38.       align-items: center;
    39.     }
    40.  
    41.     .control-bar>*+* {
    42.       margin-left: 10px;
    43.     }
    44.  
    45.     .control-bar span {
    46.       margin-left: 7px;
    47.       display: inline-block;
    48.     }
    49.  
    50.     .control-bar select {
    51.       min-width: 45px;
    52.       height: 40px;
    53.       background: #fff;
    54.       border: 1px solid #ebebeb;
    55.       border-radius: 4px;
    56.     }
    57.  
    58.     .control-bar .sel-wide {
    59.       min-width: 60px;
    60.     }
    61.  
    62.     .control-bar button {
    63.       min-width: 45px;
    64.       height: 40px;
    65.       cursor: pointer;
    66.       color: #fff;
    67.       background: #074361;
    68.       border: 1px solid #074361;
    69.       border-radius: 4px;
    70.     }
    71.   </style>
    72. </head>
    73.  
    74. <body>
    75.   <div class="info">
    76.  
    77.     <div data-jsref="control-bar" class="control-bar">
    78.       <div>
    79.         <span>Radar Type: &nbsp;</span>
    80.         <select data-jsref="aspect">
    81.           <option value="line">line</option>
    82.           <option value="area">area</option>
    83.           <option value="rose">rose</option>
    84.           <option value="scatter">scatter</option>
    85.         </select>
    86.         <span>aspect, </span>
    87.       </div>
    88.       <div>
    89.         <select data-jsref="stacked">
    90.           <option value="false">no</option>
    91.           <option value="true">normal</option>
    92.         </select>
    93.         <span>stacking, and </span>
    94.       </div>
    95.       <div>
    96.         <select data-jsref="scalek">
    97.           <option value="star">star</option>
    98.           <option value="circle">circle</option>
    99.         </select>
    100.         <span>scale-k. </span>
    101.       </div>
    102.       <button data-jsref="renderBtn">Render</button>
    103.     </div>
    104.   </div>
    105.   <div id='myChart'></div>
    106.   <script>
    107.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DOM ELEMENTS
    108.     // -----------------------------
    109.     var controlBar = document.querySelector('[data-jsref="control-bar"]');
    110.     var aspect = document.querySelector('[data-jsref="aspect"]');
    111.     var stacked = document.querySelector('[data-jsref="stacked"]');
    112.     var scalek = document.querySelector('[data-jsref="scalek"]');
    113.     var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    114.  
    115.  
    116.     var myConfig = {
    117.       "type": "radar",
    118.       "plot": {
    119.         "aspect": aspect.value,
    120.         "stacked": stacked.value
    121.       },
    122.       "scale-k": {
    123.         aspect: scalek.value,
    124.       },
    125.       "scale-v": {
    126.         "values": "0:200:100"
    127.       },
    128.       "series": [{
    129.           "values": [59, 30, 65, 34, 40]
    130.         },
    131.         {
    132.           "values": [76, 60, 11, 21, 99]
    133.         },
    134.         {
    135.           "values": [34, 0, 0, 30, 10]
    136.         }
    137.       ]
    138.     };
    139.  
    140.     renderBtn.addEventListener('click', render);
    141.  
    142.     zingchart.render({
    143.       id: 'myChart',
    144.       data: myConfig,
    145.       height: '100%',
    146.       width: '100%'
    147.     });
    148.  
    149.     function render() {
    150.       zingchart.exec('myChart', 'modify', {
    151.         data: {
    152.           plot: {
    153.             aspect: aspect.value,
    154.             stacked: stacked.value,
    155.           },
    156.           "scale-k": {
    157.             aspect: scalek.value
    158.           }
    159.         }
    160.       });
    161.     }
    162.   </script>
    163. </body>
    164.  
    165. </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 class="info">
    13.  
    14.     <div data-jsref="control-bar" class="control-bar">
    15.       <div>
    16.         <span>Radar Type: &nbsp;</span>
    17.         <select data-jsref="aspect">
    18.           <option value="line">line</option>
    19.           <option value="area">area</option>
    20.           <option value="rose">rose</option>
    21.           <option value="scatter">scatter</option>
    22.         </select>
    23.         <span>aspect, </span>
    24.       </div>
    25.       <div>
    26.         <select data-jsref="stacked">
    27.           <option value="false">no</option>
    28.           <option value="true">normal</option>
    29.         </select>
    30.         <span>stacking, and </span>
    31.       </div>
    32.       <div>
    33.         <select data-jsref="scalek">
    34.           <option value="star">star</option>
    35.           <option value="circle">circle</option>
    36.         </select>
    37.         <span>scale-k. </span>
    38.       </div>
    39.       <button data-jsref="renderBtn">Render</button>
    40.     </div>
    41.   </div>
    42.   <div id='myChart'></div>
    43. </body>
    44.  
    45. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    7.  
    8. .info {
    9.   padding: 1rem 0 0;
    10.   background: #fff;
    11.   box-sizing: border-box;
    12. }
    13.  
    14. .control-bar {
    15.   margin: 0 auto;
    16.   padding: 0 0 1rem;
    17.   display: flex;
    18.   align-items: center;
    19.   justify-content: center;
    20. }
    21.  
    22. .control-bar.loaded {
    23.   display: flex !important;
    24.   opacity: 1;
    25. }
    26.  
    27. .control-bar>div {
    28.   display: flex;
    29.   align-items: center;
    30. }
    31.  
    32. .control-bar>*+* {
    33.   margin-left: 10px;
    34. }
    35.  
    36. .control-bar span {
    37.   margin-left: 7px;
    38.   display: inline-block;
    39. }
    40.  
    41. .control-bar select {
    42.   min-width: 45px;
    43.   height: 40px;
    44.   background: #fff;
    45.   border: 1px solid #ebebeb;
    46.   border-radius: 4px;
    47. }
    48.  
    49. .control-bar .sel-wide {
    50.   min-width: 60px;
    51. }
    52.  
    53. .control-bar button {
    54.   min-width: 45px;
    55.   height: 40px;
    56.   cursor: pointer;
    57.   color: #fff;
    58.   background: #074361;
    59.   border: 1px solid #074361;
    60.   border-radius: 4px;
    61. }
    1. // DOM ELEMENTS
    2. // -----------------------------
    3. var controlBar = document.querySelector('[data-jsref="control-bar"]');
    4. var aspect = document.querySelector('[data-jsref="aspect"]');
    5. var stacked = document.querySelector('[data-jsref="stacked"]');
    6. var scalek = document.querySelector('[data-jsref="scalek"]');
    7. var renderBtn = document.querySelector('[data-jsref="renderBtn"]');
    8.  
    9.  
    10. var myConfig = {
    11.   "type": "radar",
    12.   "plot": {
    13.     "aspect": aspect.value,
    14.     "stacked": stacked.value
    15.   },
    16.   "scale-k": {
    17.     aspect: scalek.value,
    18.   },
    19.   "scale-v": {
    20.     "values": "0:200:100"
    21.   },
    22.   "series": [{
    23.       "values": [59, 30, 65, 34, 40]
    24.     },
    25.     {
    26.       "values": [76, 60, 11, 21, 99]
    27.     },
    28.     {
    29.       "values": [34, 0, 0, 30, 10]
    30.     }
    31.   ]
    32. };
    33.  
    34. renderBtn.addEventListener('click', render);
    35.  
    36. zingchart.render({
    37.   id: 'myChart',
    38.   data: myConfig,
    39.   height: '100%',
    40.   width: '100%'
    41. });
    42.  
    43. function render() {
    44.   zingchart.exec('myChart', 'modify', {
    45.     data: {
    46.       plot: {
    47.         aspect: aspect.value,
    48.         stacked: stacked.value,
    49.       },
    50.       "scale-k": {
    51.         aspect: scalek.value
    52.       }
    53.     }
    54.   });
    55. }