• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       type: 'area',
    18.       scaleX: {
    19.         visible: false
    20.       },
    21.       scaleY: {
    22.         item: {
    23.           "text": "",
    24.           "width": 25,
    25.           "height": 18,
    26.           "background-repeat": "no-repeat",
    27.           "vertical-align": "middle",
    28.           rules: [{
    29.               rule: '%v >= 0 && %v < 20',
    30.               "background-image": "//i.imgur.com/90r4p6E.png",
    31.  
    32.             },
    33.             {
    34.               rule: '%v >= 20 && %v < 40',
    35.               "background-image": "//i.imgur.com/zV4s8EI.png",
    36.  
    37.             },
    38.             {
    39.               rule: '%v >= 40 && %v < 60',
    40.               "background-image": "//i.imgur.com/hUaXlRz.png",
    41.  
    42.             },
    43.             {
    44.               rule: '%v >= 60 && %v < 80',
    45.               "background-image": "//i.imgur.com/SxSuYS0.png",
    46.  
    47.             },
    48.             {
    49.               rule: '%v >= 80 && %v < 100',
    50.               "background-image": "//i.imgur.com/NU4TS0o.png",
    51.  
    52.             },
    53.             {
    54.               rule: '%v >= 100',
    55.               "background-image": "//i.imgur.com/NU4TS0o.png",
    56.  
    57.             },
    58.           ]
    59.         },
    60.         tick: {
    61.           lineWidth: 2,
    62.           rules: [{
    63.               rule: '%v >= 0 && %v < 20',
    64.               lineColor: 'red'
    65.             },
    66.             {
    67.               rule: '%v >= 20 && %v < 40',
    68.               lineColor: 'orange'
    69.             },
    70.             {
    71.               rule: '%v >= 40 && %v < 60',
    72.               lineColor: 'brown'
    73.             },
    74.             {
    75.               rule: '%v >= 60 && %v < 80',
    76.               lineColor: 'green'
    77.             },
    78.             {
    79.               rule: '%v >= 80 && %v < 100',
    80.               lineColor: 'blue'
    81.             },
    82.             {
    83.               rule: '%v >= 100',
    84.               lineColor: 'purple'
    85.             }
    86.           ]
    87.         },
    88.         guide: {
    89.           visible: true,
    90.  
    91.           lineStyle: 'solid',
    92.           lineWidth: 1,
    93.           rules: [{
    94.               rule: '%v >= 0 && %v < 20',
    95.               lineColor: 'red'
    96.             },
    97.             {
    98.               rule: '%v >= 20 && %v < 40',
    99.               lineColor: 'orange'
    100.             },
    101.             {
    102.               rule: '%v >= 40 && %v < 60',
    103.               lineColor: 'brown'
    104.             },
    105.             {
    106.               rule: '%v >= 60 && %v < 80',
    107.               lineColor: 'green'
    108.             },
    109.             {
    110.               rule: '%v >= 80 && %v < 100',
    111.               lineColor: 'blue'
    112.             },
    113.             {
    114.               rule: '%v >= 100',
    115.               lineColor: 'purple'
    116.             },
    117.           ]
    118.         },
    119.         minorTicks: 2,
    120.         minorTick: {
    121.           lineWidth: 1,
    122.           size: 5,
    123.           rules: [{
    124.               rule: '%v >= 0 && %v < 20',
    125.               lineColor: 'red'
    126.             },
    127.             {
    128.               rule: '%v >= 20 && %v < 40',
    129.               lineColor: 'orange'
    130.             },
    131.             {
    132.               rule: '%v >= 40 && %v < 60',
    133.               lineColor: 'brown'
    134.             },
    135.             {
    136.               rule: '%v >= 60 && %v < 80',
    137.               lineColor: 'green'
    138.             },
    139.             {
    140.               rule: '%v >= 80 && %v < 100',
    141.               lineColor: 'blue'
    142.             },
    143.             {
    144.               rule: '%v >= 100',
    145.               lineColor: 'purple'
    146.             }
    147.           ]
    148.         },
    149.         minorGuide: {
    150.           alpha: 1,
    151.           lineStyle: 'dashdot',
    152.           lineWidth: 1,
    153.           rules: [{
    154.               rule: '%v >= 0 && %v < 20',
    155.               lineColor: 'red'
    156.             },
    157.             {
    158.               rule: '%v >= 20 && %v < 40',
    159.               lineColor: 'orange'
    160.             },
    161.             {
    162.               rule: '%v >= 40 && %v < 60',
    163.               lineColor: 'brown'
    164.             },
    165.             {
    166.               rule: '%v >= 60 && %v < 80',
    167.               lineColor: 'green'
    168.             },
    169.             {
    170.               rule: '%v >= 80 && %v < 100',
    171.               lineColor: 'blue'
    172.             },
    173.             {
    174.               rule: '%v >= 100',
    175.               lineColor: 'purple'
    176.             }
    177.           ]
    178.         }
    179.       },
    180.       plot: {
    181.         aspect: 'spline',
    182.         backgroundColor: 'black',
    183.         lineColor: 'black',
    184.         marker: {
    185.           backgroundColor: 'black'
    186.         }
    187.       },
    188.       series: [{
    189.         values: [38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2, 36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2]
    190.       }]
    191.     };
    192.  
    193.     zingchart.render({
    194.       id: 'myChart',
    195.       data: myConfig,
    196.       height: 400,
    197.       width: '100%'
    198.     });
    199.   </script>
    200. </body>
    201.  
    202. </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'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   type: 'area',
    3.   scaleX: {
    4.     visible: false
    5.   },
    6.   scaleY: {
    7.     item: {
    8.       "text": "",
    9.       "width": 25,
    10.       "height": 18,
    11.       "background-repeat": "no-repeat",
    12.       "vertical-align": "middle",
    13.       rules: [{
    14.           rule: '%v >= 0 && %v < 20',
    15.           "background-image": "//i.imgur.com/90r4p6E.png",
    16.  
    17.         },
    18.         {
    19.           rule: '%v >= 20 && %v < 40',
    20.           "background-image": "//i.imgur.com/zV4s8EI.png",
    21.  
    22.         },
    23.         {
    24.           rule: '%v >= 40 && %v < 60',
    25.           "background-image": "//i.imgur.com/hUaXlRz.png",
    26.  
    27.         },
    28.         {
    29.           rule: '%v >= 60 && %v < 80',
    30.           "background-image": "//i.imgur.com/SxSuYS0.png",
    31.  
    32.         },
    33.         {
    34.           rule: '%v >= 80 && %v < 100',
    35.           "background-image": "//i.imgur.com/NU4TS0o.png",
    36.  
    37.         },
    38.         {
    39.           rule: '%v >= 100',
    40.           "background-image": "//i.imgur.com/NU4TS0o.png",
    41.  
    42.         },
    43.       ]
    44.     },
    45.     tick: {
    46.       lineWidth: 2,
    47.       rules: [{
    48.           rule: '%v >= 0 && %v < 20',
    49.           lineColor: 'red'
    50.         },
    51.         {
    52.           rule: '%v >= 20 && %v < 40',
    53.           lineColor: 'orange'
    54.         },
    55.         {
    56.           rule: '%v >= 40 && %v < 60',
    57.           lineColor: 'brown'
    58.         },
    59.         {
    60.           rule: '%v >= 60 && %v < 80',
    61.           lineColor: 'green'
    62.         },
    63.         {
    64.           rule: '%v >= 80 && %v < 100',
    65.           lineColor: 'blue'
    66.         },
    67.         {
    68.           rule: '%v >= 100',
    69.           lineColor: 'purple'
    70.         }
    71.       ]
    72.     },
    73.     guide: {
    74.       visible: true,
    75.  
    76.       lineStyle: 'solid',
    77.       lineWidth: 1,
    78.       rules: [{
    79.           rule: '%v >= 0 && %v < 20',
    80.           lineColor: 'red'
    81.         },
    82.         {
    83.           rule: '%v >= 20 && %v < 40',
    84.           lineColor: 'orange'
    85.         },
    86.         {
    87.           rule: '%v >= 40 && %v < 60',
    88.           lineColor: 'brown'
    89.         },
    90.         {
    91.           rule: '%v >= 60 && %v < 80',
    92.           lineColor: 'green'
    93.         },
    94.         {
    95.           rule: '%v >= 80 && %v < 100',
    96.           lineColor: 'blue'
    97.         },
    98.         {
    99.           rule: '%v >= 100',
    100.           lineColor: 'purple'
    101.         },
    102.       ]
    103.     },
    104.     minorTicks: 2,
    105.     minorTick: {
    106.       lineWidth: 1,
    107.       size: 5,
    108.       rules: [{
    109.           rule: '%v >= 0 && %v < 20',
    110.           lineColor: 'red'
    111.         },
    112.         {
    113.           rule: '%v >= 20 && %v < 40',
    114.           lineColor: 'orange'
    115.         },
    116.         {
    117.           rule: '%v >= 40 && %v < 60',
    118.           lineColor: 'brown'
    119.         },
    120.         {
    121.           rule: '%v >= 60 && %v < 80',
    122.           lineColor: 'green'
    123.         },
    124.         {
    125.           rule: '%v >= 80 && %v < 100',
    126.           lineColor: 'blue'
    127.         },
    128.         {
    129.           rule: '%v >= 100',
    130.           lineColor: 'purple'
    131.         }
    132.       ]
    133.     },
    134.     minorGuide: {
    135.       alpha: 1,
    136.       lineStyle: 'dashdot',
    137.       lineWidth: 1,
    138.       rules: [{
    139.           rule: '%v >= 0 && %v < 20',
    140.           lineColor: 'red'
    141.         },
    142.         {
    143.           rule: '%v >= 20 && %v < 40',
    144.           lineColor: 'orange'
    145.         },
    146.         {
    147.           rule: '%v >= 40 && %v < 60',
    148.           lineColor: 'brown'
    149.         },
    150.         {
    151.           rule: '%v >= 60 && %v < 80',
    152.           lineColor: 'green'
    153.         },
    154.         {
    155.           rule: '%v >= 80 && %v < 100',
    156.           lineColor: 'blue'
    157.         },
    158.         {
    159.           rule: '%v >= 100',
    160.           lineColor: 'purple'
    161.         }
    162.       ]
    163.     }
    164.   },
    165.   plot: {
    166.     aspect: 'spline',
    167.     backgroundColor: 'black',
    168.     lineColor: 'black',
    169.     marker: {
    170.       backgroundColor: 'black'
    171.     }
    172.   },
    173.   series: [{
    174.     values: [38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2, 36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2]
    175.   }]
    176. };
    177.  
    178. zingchart.render({
    179.   id: 'myChart',
    180.   data: myConfig,
    181.   height: 400,
    182.   width: '100%'
    183. });