• 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.     let chartConfig = {
    37.       type: 'null',
    38.       images: [{
    39.           x: 50,
    40.           y: 50,
    41.           width: 16,
    42.           backgroundRepeat: 'no-repeat',
    43.           backgroundPosition: '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.           spaceX: 16,
    50.           spaceY: 35
    51.         },
    52.         {
    53.           x: 250,
    54.           y: 50,
    55.           width: 16,
    56.           backgroundRepeat: 'no-repeat',
    57.           backgroundPosition: '0 0',
    58.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    59.           repeat: true,
    60.           items: 13,
    61.           cols: 8,
    62.           rows: 4,
    63.           spaceX: 16,
    64.           spaceY: 35,
    65.           inactive: {
    66.             alpha: 0.25,
    67.             topState: {
    68.               backgroundColor: 'red',
    69.               offsetX: 10
    70.             }
    71.           }
    72.         },
    73.         {
    74.           x: 450,
    75.           y: 50,
    76.           width: 16,
    77.           backgroundRepeat: 'no-repeat',
    78.           backgroundPosition: '0 0',
    79.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    80.           repeat: true,
    81.           items: 13,
    82.           cols: 8,
    83.           rows: 4,
    84.           spaceX: 16,
    85.           spaceY: 35,
    86.           inactive: {
    87.             backgroundPosition: '-16px 0'
    88.           }
    89.         },
    90.  
    91.         {
    92.           x: 50,
    93.           y: 250,
    94.           width: 16,
    95.           backgroundRepeat: 'no-repeat',
    96.           backgroundPosition: '0 0',
    97.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    98.           repeat: true,
    99.           items: 23,
    100.           cols: 8,
    101.           rows: 4,
    102.           spaceX: 16,
    103.           spaceY: 35,
    104.           offsetCol: 5
    105.         },
    106.         {
    107.           x: 250,
    108.           y: 250,
    109.           width: 16,
    110.           backgroundRepeat: 'no-repeat',
    111.           backgroundPosition: '0 0',
    112.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    113.           repeat: true,
    114.           items: 13,
    115.           cols: 8,
    116.           rows: 4,
    117.           spaceX: 16,
    118.           spaceY: 35,
    119.           offsetRow: 10,
    120.           inactive: {
    121.             alpha: 0.25
    122.           }
    123.         },
    124.         {
    125.           x: 450,
    126.           y: 250,
    127.           width: 16,
    128.           backgroundRepeat: 'no-repeat',
    129.           backgroundPosition: '0 0',
    130.           src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    131.           repeat: true,
    132.           items: 13,
    133.           cols: 12,
    134.           rows: 3,
    135.           spaceX: 16,
    136.           spaceY: 35,
    137.           offsetCol: -5,
    138.           offsetRow: 10,
    139.           inactive: {
    140.             backgroundPosition: '-16px 0'
    141.           }
    142.         }
    143.       ]
    144.     };
    145.  
    146.     zingchart.render({
    147.       id: 'myChart',
    148.       data: chartConfig,
    149.       height: 500,
    150.       width: 800
    151.     });
    152.   </script>
    153. </body>
    154.  
    155. </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. let chartConfig = {
    2.   type: 'null',
    3.   images: [{
    4.       x: 50,
    5.       y: 50,
    6.       width: 16,
    7.       backgroundRepeat: 'no-repeat',
    8.       backgroundPosition: '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.       spaceX: 16,
    15.       spaceY: 35
    16.     },
    17.     {
    18.       x: 250,
    19.       y: 50,
    20.       width: 16,
    21.       backgroundRepeat: 'no-repeat',
    22.       backgroundPosition: '0 0',
    23.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    24.       repeat: true,
    25.       items: 13,
    26.       cols: 8,
    27.       rows: 4,
    28.       spaceX: 16,
    29.       spaceY: 35,
    30.       inactive: {
    31.         alpha: 0.25,
    32.         topState: {
    33.           backgroundColor: 'red',
    34.           offsetX: 10
    35.         }
    36.       }
    37.     },
    38.     {
    39.       x: 450,
    40.       y: 50,
    41.       width: 16,
    42.       backgroundRepeat: 'no-repeat',
    43.       backgroundPosition: '0 0',
    44.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    45.       repeat: true,
    46.       items: 13,
    47.       cols: 8,
    48.       rows: 4,
    49.       spaceX: 16,
    50.       spaceY: 35,
    51.       inactive: {
    52.         backgroundPosition: '-16px 0'
    53.       }
    54.     },
    55.  
    56.     {
    57.       x: 50,
    58.       y: 250,
    59.       width: 16,
    60.       backgroundRepeat: 'no-repeat',
    61.       backgroundPosition: '0 0',
    62.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    63.       repeat: true,
    64.       items: 23,
    65.       cols: 8,
    66.       rows: 4,
    67.       spaceX: 16,
    68.       spaceY: 35,
    69.       offsetCol: 5
    70.     },
    71.     {
    72.       x: 250,
    73.       y: 250,
    74.       width: 16,
    75.       backgroundRepeat: 'no-repeat',
    76.       backgroundPosition: '0 0',
    77.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    78.       repeat: true,
    79.       items: 13,
    80.       cols: 8,
    81.       rows: 4,
    82.       spaceX: 16,
    83.       spaceY: 35,
    84.       offsetRow: 10,
    85.       inactive: {
    86.         alpha: 0.25
    87.       }
    88.     },
    89.     {
    90.       x: 450,
    91.       y: 250,
    92.       width: 16,
    93.       backgroundRepeat: 'no-repeat',
    94.       backgroundPosition: '0 0',
    95.       src: 'https://app.zingsoft.com/api/file/1NJRAA52/user-sprite.png',
    96.       repeat: true,
    97.       items: 13,
    98.       cols: 12,
    99.       rows: 3,
    100.       spaceX: 16,
    101.       spaceY: 35,
    102.       offsetCol: -5,
    103.       offsetRow: 10,
    104.       inactive: {
    105.         backgroundPosition: '-16px 0'
    106.       }
    107.     }
    108.   ]
    109. };
    110.  
    111. zingchart.render({
    112.   id: 'myChart',
    113.   data: chartConfig,
    114.   height: 500,
    115.   width: 800
    116. });