• 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.         item: {
    20.           borderRadius: 3,
    21.           borderWidth: 1,
    22.           fontFamily: 'Georgia',
    23.           fontSize: 12,
    24.           padding: '1px 5px',
    25.           rules: [{
    26.               rule: '%v >= 0 && %v < 3',
    27.               backgroundColor: '#ffe6e6',
    28.               borderColor: 'red',
    29.               fontColor: 'red'
    30.             },
    31.             {
    32.               rule: '%v >= 3 && %v < 6',
    33.               backgroundColor: '#fff6e6',
    34.               borderColor: 'orange',
    35.               fontColor: 'orange'
    36.             },
    37.             {
    38.               rule: '%v >= 6 && %v < 9',
    39.               backgroundColor: '#ffffe6',
    40.               borderColor: 'brown',
    41.               fontColor: 'brown'
    42.             },
    43.             {
    44.               rule: '%v >= 9 && %v < 12',
    45.               backgroundColor: '#e6ffe6',
    46.               borderColor: 'green',
    47.               fontColor: 'green'
    48.             },
    49.             {
    50.               rule: '%v >= 12 && %v < 15',
    51.               backgroundColor: '#e6e6ff',
    52.               borderColor: 'blue',
    53.               fontColor: 'blue'
    54.             },
    55.             {
    56.               rule: '%v >= 15 && %v < 18',
    57.               backgroundColor: '#ffe6ff',
    58.               borderColor: 'purple',
    59.               fontColor: 'purple'
    60.             },
    61.           ]
    62.         },
    63.         tick: {
    64.           lineWidth: 2,
    65.           rules: [{
    66.               rule: '%v >= 0 && %v < 3',
    67.               lineColor: 'red'
    68.             },
    69.             {
    70.               rule: '%v >= 3 && %v < 6',
    71.               lineColor: 'orange'
    72.             },
    73.             {
    74.               rule: '%v >= 6 && %v < 9',
    75.               lineColor: 'brown'
    76.             },
    77.             {
    78.               rule: '%v >= 9 && %v < 12',
    79.               lineColor: 'green'
    80.             },
    81.             {
    82.               rule: '%v >= 12 && %v < 15',
    83.               lineColor: 'blue'
    84.             },
    85.             {
    86.               rule: '%v >= 15 && %v < 18',
    87.               lineColor: 'purple'
    88.             }
    89.           ]
    90.         },
    91.         guide: {
    92.           visible: true,
    93.  
    94.           lineStyle: 'solid',
    95.           lineWidth: 1,
    96.           rules: [{
    97.               rule: '%v >= 0 && %v < 3',
    98.               lineColor: 'red'
    99.             },
    100.             {
    101.               rule: '%v >= 3 && %v < 6',
    102.               lineColor: 'orange'
    103.             },
    104.             {
    105.               rule: '%v >= 6 && %v < 9',
    106.               lineColor: 'brown'
    107.             },
    108.             {
    109.               rule: '%v >= 9 && %v < 12',
    110.               lineColor: 'green'
    111.             },
    112.             {
    113.               rule: '%v >= 12 && %v < 15',
    114.               lineColor: 'blue'
    115.             },
    116.             {
    117.               rule: '%v >= 15 && %v < 18',
    118.               lineColor: 'purple'
    119.             },
    120.           ]
    121.         },
    122.         minorTicks: 3,
    123.         minorTick: {
    124.           lineWidth: 1,
    125.           size: 10,
    126.           rules: [{
    127.               rule: '%v >= 0 && %v < 3',
    128.               lineColor: 'red'
    129.             },
    130.             {
    131.               rule: '%v >= 3 && %v < 6',
    132.               lineColor: 'orange'
    133.             },
    134.             {
    135.               rule: '%v >= 6 && %v < 9',
    136.               lineColor: 'brown'
    137.             },
    138.             {
    139.               rule: '%v >= 9 && %v < 12',
    140.               lineColor: 'green'
    141.             },
    142.             {
    143.               rule: '%v >= 12 && %v < 15',
    144.               lineColor: 'blue'
    145.             },
    146.             {
    147.               rule: '%v >= 15 && %v < 18',
    148.               lineColor: 'purple'
    149.             }
    150.           ]
    151.         },
    152.         minorGuide: {
    153.           alpha: 1,
    154.           lineStyle: 'dotted',
    155.           lineWidth: 1,
    156.           rules: [{
    157.               rule: '%v >= 0 && %v < 3',
    158.               lineColor: 'red'
    159.             },
    160.             {
    161.               rule: '%v >= 3 && %v < 6',
    162.               lineColor: 'orange'
    163.             },
    164.             {
    165.               rule: '%v >= 6 && %v < 9',
    166.               lineColor: 'brown'
    167.             },
    168.             {
    169.               rule: '%v >= 9 && %v < 12',
    170.               lineColor: 'green'
    171.             },
    172.             {
    173.               rule: '%v >= 12 && %v < 15',
    174.               lineColor: 'blue'
    175.             },
    176.             {
    177.               rule: '%v >= 15 && %v < 18',
    178.               lineColor: 'purple'
    179.             }
    180.           ]
    181.         }
    182.       },
    183.       scaleY: {
    184.         visible: false
    185.       },
    186.       plot: {
    187.         aspect: 'spline',
    188.         backgroundColor: 'black',
    189.         lineColor: 'black',
    190.         marker: {
    191.           backgroundColor: 'black'
    192.         }
    193.       },
    194.       series: [{
    195.         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]
    196.       }]
    197.     };
    198.  
    199.     zingchart.render({
    200.       id: 'myChart',
    201.       data: myConfig,
    202.       height: 400,
    203.       width: '100%'
    204.     });
    205.   </script>
    206. </body>
    207.  
    208. </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.     item: {
    5.       borderRadius: 3,
    6.       borderWidth: 1,
    7.       fontFamily: 'Georgia',
    8.       fontSize: 12,
    9.       padding: '1px 5px',
    10.       rules: [{
    11.           rule: '%v >= 0 && %v < 3',
    12.           backgroundColor: '#ffe6e6',
    13.           borderColor: 'red',
    14.           fontColor: 'red'
    15.         },
    16.         {
    17.           rule: '%v >= 3 && %v < 6',
    18.           backgroundColor: '#fff6e6',
    19.           borderColor: 'orange',
    20.           fontColor: 'orange'
    21.         },
    22.         {
    23.           rule: '%v >= 6 && %v < 9',
    24.           backgroundColor: '#ffffe6',
    25.           borderColor: 'brown',
    26.           fontColor: 'brown'
    27.         },
    28.         {
    29.           rule: '%v >= 9 && %v < 12',
    30.           backgroundColor: '#e6ffe6',
    31.           borderColor: 'green',
    32.           fontColor: 'green'
    33.         },
    34.         {
    35.           rule: '%v >= 12 && %v < 15',
    36.           backgroundColor: '#e6e6ff',
    37.           borderColor: 'blue',
    38.           fontColor: 'blue'
    39.         },
    40.         {
    41.           rule: '%v >= 15 && %v < 18',
    42.           backgroundColor: '#ffe6ff',
    43.           borderColor: 'purple',
    44.           fontColor: 'purple'
    45.         },
    46.       ]
    47.     },
    48.     tick: {
    49.       lineWidth: 2,
    50.       rules: [{
    51.           rule: '%v >= 0 && %v < 3',
    52.           lineColor: 'red'
    53.         },
    54.         {
    55.           rule: '%v >= 3 && %v < 6',
    56.           lineColor: 'orange'
    57.         },
    58.         {
    59.           rule: '%v >= 6 && %v < 9',
    60.           lineColor: 'brown'
    61.         },
    62.         {
    63.           rule: '%v >= 9 && %v < 12',
    64.           lineColor: 'green'
    65.         },
    66.         {
    67.           rule: '%v >= 12 && %v < 15',
    68.           lineColor: 'blue'
    69.         },
    70.         {
    71.           rule: '%v >= 15 && %v < 18',
    72.           lineColor: 'purple'
    73.         }
    74.       ]
    75.     },
    76.     guide: {
    77.       visible: true,
    78.  
    79.       lineStyle: 'solid',
    80.       lineWidth: 1,
    81.       rules: [{
    82.           rule: '%v >= 0 && %v < 3',
    83.           lineColor: 'red'
    84.         },
    85.         {
    86.           rule: '%v >= 3 && %v < 6',
    87.           lineColor: 'orange'
    88.         },
    89.         {
    90.           rule: '%v >= 6 && %v < 9',
    91.           lineColor: 'brown'
    92.         },
    93.         {
    94.           rule: '%v >= 9 && %v < 12',
    95.           lineColor: 'green'
    96.         },
    97.         {
    98.           rule: '%v >= 12 && %v < 15',
    99.           lineColor: 'blue'
    100.         },
    101.         {
    102.           rule: '%v >= 15 && %v < 18',
    103.           lineColor: 'purple'
    104.         },
    105.       ]
    106.     },
    107.     minorTicks: 3,
    108.     minorTick: {
    109.       lineWidth: 1,
    110.       size: 10,
    111.       rules: [{
    112.           rule: '%v >= 0 && %v < 3',
    113.           lineColor: 'red'
    114.         },
    115.         {
    116.           rule: '%v >= 3 && %v < 6',
    117.           lineColor: 'orange'
    118.         },
    119.         {
    120.           rule: '%v >= 6 && %v < 9',
    121.           lineColor: 'brown'
    122.         },
    123.         {
    124.           rule: '%v >= 9 && %v < 12',
    125.           lineColor: 'green'
    126.         },
    127.         {
    128.           rule: '%v >= 12 && %v < 15',
    129.           lineColor: 'blue'
    130.         },
    131.         {
    132.           rule: '%v >= 15 && %v < 18',
    133.           lineColor: 'purple'
    134.         }
    135.       ]
    136.     },
    137.     minorGuide: {
    138.       alpha: 1,
    139.       lineStyle: 'dotted',
    140.       lineWidth: 1,
    141.       rules: [{
    142.           rule: '%v >= 0 && %v < 3',
    143.           lineColor: 'red'
    144.         },
    145.         {
    146.           rule: '%v >= 3 && %v < 6',
    147.           lineColor: 'orange'
    148.         },
    149.         {
    150.           rule: '%v >= 6 && %v < 9',
    151.           lineColor: 'brown'
    152.         },
    153.         {
    154.           rule: '%v >= 9 && %v < 12',
    155.           lineColor: 'green'
    156.         },
    157.         {
    158.           rule: '%v >= 12 && %v < 15',
    159.           lineColor: 'blue'
    160.         },
    161.         {
    162.           rule: '%v >= 15 && %v < 18',
    163.           lineColor: 'purple'
    164.         }
    165.       ]
    166.     }
    167.   },
    168.   scaleY: {
    169.     visible: false
    170.   },
    171.   plot: {
    172.     aspect: 'spline',
    173.     backgroundColor: 'black',
    174.     lineColor: 'black',
    175.     marker: {
    176.       backgroundColor: 'black'
    177.     }
    178.   },
    179.   series: [{
    180.     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]
    181.   }]
    182. };
    183.  
    184. zingchart.render({
    185.   id: 'myChart',
    186.   data: myConfig,
    187.   height: 400,
    188.   width: '100%'
    189. });