• 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.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart">
    32.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    36.     var myConfig = {
    37.       "type": "null",
    38.       "images": [{
    39.           "x": 50,
    40.           "y": 50,
    41.           "width": 16,
    42.           "background-repeat": "no-repeat",
    43.           "background-position": "0 0",
    44.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    45.           "repeat": true,
    46.           "items": 23,
    47.           "cols": 8,
    48.           "rows": 4,
    49.           "space-x": 16,
    50.           "space-y": 35,
    51.  
    52.           bottomState: {
    53.             alpha: 0.2,
    54.             offsetX: 10,
    55.             offsetY: 10,
    56.             backgroundColor: 'red',
    57.           }
    58.         },
    59.         {
    60.           "x": 250,
    61.           "y": 50,
    62.           "width": 16,
    63.           "background-repeat": "no-repeat",
    64.           "background-position": "0 0",
    65.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    66.           "repeat": true,
    67.           "items": 13,
    68.           "cols": 8,
    69.           "rows": 4,
    70.           "space-x": 16,
    71.           "space-y": 35,
    72.           "inactive": {
    73.             "alpha": 0.25
    74.           }
    75.         },
    76.         {
    77.           "x": 450,
    78.           "y": 50,
    79.           "width": 16,
    80.           "background-repeat": "no-repeat",
    81.           "background-position": "0 0",
    82.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    83.           "repeat": true,
    84.           "items": 13,
    85.           "cols": 8,
    86.           "rows": 4,
    87.           "space-x": 16,
    88.           "space-y": 35,
    89.           "inactive": {
    90.             "background-position": "-16px 0"
    91.           }
    92.         },
    93.  
    94.         {
    95.           "x": 50,
    96.           "y": 250,
    97.           "width": 16,
    98.           "background-repeat": "no-repeat",
    99.           "background-position": "0 0",
    100.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    101.           "repeat": true,
    102.           "items": 23,
    103.           "cols": 8,
    104.           "rows": 4,
    105.           "space-x": 16,
    106.           "space-y": 35,
    107.           "offset-col": 5
    108.         },
    109.         {
    110.           "x": 250,
    111.           "y": 250,
    112.           "width": 16,
    113.           "background-repeat": "no-repeat",
    114.           "background-position": "0 0",
    115.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    116.           "repeat": true,
    117.           "items": 13,
    118.           "cols": 8,
    119.           "rows": 4,
    120.           "space-x": 16,
    121.           "space-y": 35,
    122.           "offset-row": 10,
    123.           "inactive": {
    124.             "alpha": 0.25
    125.           }
    126.         },
    127.         {
    128.           "x": 450,
    129.           "y": 250,
    130.           "width": 16,
    131.           "background-repeat": "no-repeat",
    132.           "background-position": "0 0",
    133.           "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    134.           "repeat": true,
    135.           "items": 13,
    136.           "cols": 12,
    137.           "rows": 3,
    138.           "space-x": 16,
    139.           "space-y": 35,
    140.           "offset-col": -5,
    141.           "offset-row": 10,
    142.           "inactive": {
    143.             "background-position": "-16px 0"
    144.           }
    145.         }
    146.  
    147.  
    148.  
    149.       ]
    150.     };
    151.  
    152.     zingchart.render({
    153.       id: 'myChart',
    154.       data: myConfig,
    155.       height: 500,
    156.       width: 800
    157.     });
    158.   </script>
    159. </body>
    160.  
    161. </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">
    13.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "type": "null",
    3.   "images": [{
    4.       "x": 50,
    5.       "y": 50,
    6.       "width": 16,
    7.       "background-repeat": "no-repeat",
    8.       "background-position": "0 0",
    9.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    10.       "repeat": true,
    11.       "items": 23,
    12.       "cols": 8,
    13.       "rows": 4,
    14.       "space-x": 16,
    15.       "space-y": 35,
    16.  
    17.       bottomState: {
    18.         alpha: 0.2,
    19.         offsetX: 10,
    20.         offsetY: 10,
    21.         backgroundColor: 'red',
    22.       }
    23.     },
    24.     {
    25.       "x": 250,
    26.       "y": 50,
    27.       "width": 16,
    28.       "background-repeat": "no-repeat",
    29.       "background-position": "0 0",
    30.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    31.       "repeat": true,
    32.       "items": 13,
    33.       "cols": 8,
    34.       "rows": 4,
    35.       "space-x": 16,
    36.       "space-y": 35,
    37.       "inactive": {
    38.         "alpha": 0.25
    39.       }
    40.     },
    41.     {
    42.       "x": 450,
    43.       "y": 50,
    44.       "width": 16,
    45.       "background-repeat": "no-repeat",
    46.       "background-position": "0 0",
    47.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    48.       "repeat": true,
    49.       "items": 13,
    50.       "cols": 8,
    51.       "rows": 4,
    52.       "space-x": 16,
    53.       "space-y": 35,
    54.       "inactive": {
    55.         "background-position": "-16px 0"
    56.       }
    57.     },
    58.  
    59.     {
    60.       "x": 50,
    61.       "y": 250,
    62.       "width": 16,
    63.       "background-repeat": "no-repeat",
    64.       "background-position": "0 0",
    65.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    66.       "repeat": true,
    67.       "items": 23,
    68.       "cols": 8,
    69.       "rows": 4,
    70.       "space-x": 16,
    71.       "space-y": 35,
    72.       "offset-col": 5
    73.     },
    74.     {
    75.       "x": 250,
    76.       "y": 250,
    77.       "width": 16,
    78.       "background-repeat": "no-repeat",
    79.       "background-position": "0 0",
    80.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    81.       "repeat": true,
    82.       "items": 13,
    83.       "cols": 8,
    84.       "rows": 4,
    85.       "space-x": 16,
    86.       "space-y": 35,
    87.       "offset-row": 10,
    88.       "inactive": {
    89.         "alpha": 0.25
    90.       }
    91.     },
    92.     {
    93.       "x": 450,
    94.       "y": 250,
    95.       "width": 16,
    96.       "background-repeat": "no-repeat",
    97.       "background-position": "0 0",
    98.       "src": "https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png",
    99.       "repeat": true,
    100.       "items": 13,
    101.       "cols": 12,
    102.       "rows": 3,
    103.       "space-x": 16,
    104.       "space-y": 35,
    105.       "offset-col": -5,
    106.       "offset-row": 10,
    107.       "inactive": {
    108.         "background-position": "-16px 0"
    109.       }
    110.     }
    111.  
    112.  
    113.  
    114.   ]
    115. };
    116.  
    117. zingchart.render({
    118.   id: 'myChart',
    119.   data: myConfig,
    120.   height: 500,
    121.   width: 800
    122. });