• 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.           backgroundColor: '#ffe6e6',
    21.           borderColor: 'red',
    22.           borderRadius: 3,
    23.           borderWidth: 1,
    24.           fontColor: 'red',
    25.           fontFamily: 'Georgia',
    26.           padding: '5px 15px'
    27.         },
    28.         rules: [{
    29.           rule: '%v < 10',
    30.           decimals: 1
    31.         }]
    32.       },
    33.       scaleY: {
    34.  
    35.       },
    36.       series: [{
    37.           values: [
    38.             38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2,
    39.             36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2, 83.9, 91.3
    40.           ],
    41.           lineColor: '#4CAF50',
    42.           backgroundColor: '#4CAF50',
    43.           marker: {
    44.             backgroundColor: '#4CAF50'
    45.           }
    46.         },
    47.         {
    48.           values: [
    49.             51.9, 8.1, 73.6, 37.4, 36.1, 57.4, 96.1, 37.9, 69.4, 18.2,
    50.             66.3, 26.4, 72.5, 29.3, 61.5, 20.3, 71.5, 37.2, 49.9, 7.3
    51.           ],
    52.           lineColor: '#03A9F4',
    53.           backgroundColor: '#03A9F4',
    54.           marker: {
    55.             backgroundColor: '#03A9F4'
    56.           }
    57.         }
    58.       ]
    59.     };
    60.  
    61.     zingchart.render({
    62.       id: 'myChart',
    63.       data: myConfig,
    64.       height: 400,
    65.       width: '100%'
    66.     });
    67.   </script>
    68. </body>
    69.  
    70. </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.       backgroundColor: '#ffe6e6',
    6.       borderColor: 'red',
    7.       borderRadius: 3,
    8.       borderWidth: 1,
    9.       fontColor: 'red',
    10.       fontFamily: 'Georgia',
    11.       padding: '5px 15px'
    12.     },
    13.     rules: [{
    14.       rule: '%v < 10',
    15.       decimals: 1
    16.     }]
    17.   },
    18.   scaleY: {
    19.  
    20.   },
    21.   series: [{
    22.       values: [
    23.         38.2, 96.3, 53.6, 27.4, 14.1, 81.4, 31.1, 70.9, 54.4, 5.2,
    24.         36.3, 80.4, 50.5, 35.3, 30.5, 64.3, 10.5, 27.2, 83.9, 91.3
    25.       ],
    26.       lineColor: '#4CAF50',
    27.       backgroundColor: '#4CAF50',
    28.       marker: {
    29.         backgroundColor: '#4CAF50'
    30.       }
    31.     },
    32.     {
    33.       values: [
    34.         51.9, 8.1, 73.6, 37.4, 36.1, 57.4, 96.1, 37.9, 69.4, 18.2,
    35.         66.3, 26.4, 72.5, 29.3, 61.5, 20.3, 71.5, 37.2, 49.9, 7.3
    36.       ],
    37.       lineColor: '#03A9F4',
    38.       backgroundColor: '#03A9F4',
    39.       marker: {
    40.         backgroundColor: '#03A9F4'
    41.       }
    42.     }
    43.   ]
    44. };
    45.  
    46. zingchart.render({
    47.   id: 'myChart',
    48.   data: myConfig,
    49.   height: 400,
    50.   width: '100%'
    51. });