• 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.       "preview": {
    19.         "handle-left": {
    20.           "background-color": "#ff6666",
    21.           "border-color": "#6666ff",
    22.           "alpha": 0.8,
    23.           "border-radius": "15px",
    24.           "border-width": 2,
    25.           "height": "50px",
    26.           "width": "10px"
    27.         },
    28.         "handle-right": {
    29.           "background-color": "#ff6666",
    30.           "border-color": "#6666ff",
    31.           "alpha": 0.8,
    32.           "border-radius": "15px",
    33.           "border-width": 2,
    34.           "height": "50px",
    35.           "width": "10px"
    36.         },
    37.         "handle-top": {
    38.           "background-color": "#6666ff",
    39.           "border-color": "#ff6666",
    40.           "alpha": 0.8,
    41.           "border-radius": "15px",
    42.           "border-width": 2,
    43.           "height": "10px",
    44.           "width": "50px"
    45.         },
    46.         "handle-bottom": {
    47.           "background-color": "#6666ff",
    48.           "border-color": "#ff6666",
    49.           "alpha": 0.8,
    50.           "border-radius": "15px",
    51.           "border-width": 2,
    52.           "height": "10px",
    53.           "width": "50px"
    54.         }
    55.       },
    56.       "scale-x": {
    57.         "zooming": true,
    58.         "zoom-to": [10, 90],
    59.         "item": {
    60.           "font-size": 10
    61.         }
    62.       },
    63.       "scale-y": {
    64.         "zooming": true,
    65.         "zoom-to": [50, 300],
    66.         "values": "0:350:50",
    67.         "guide": {
    68.           "line-style": "dotted"
    69.         },
    70.         "item": {
    71.           "font-size": 10
    72.         }
    73.       },
    74.       "plot": {
    75.         "line-width": 1,
    76.         "line-color": "#4d9900",
    77.         "background-color": "#4d9900",
    78.         "marker": {
    79.           "size": 3,
    80.           "background-color": "#ccccff #6666ff",
    81.           "border-width": 1,
    82.           "border-color": "#4d9900"
    83.         },
    84.         "tooltip": {
    85.           "visible": false
    86.         }
    87.       },
    88.       "crosshair-x": {
    89.         "plot-label": {
    90.           "text": "%v"
    91.         },
    92.         "scale-label": {
    93.           "visible": false
    94.         }
    95.       },
    96.       "crosshair-y": {
    97.         "type": "multiple",
    98.         "scale-label": {
    99.           "visible": false
    100.         }
    101.       },
    102.       "series": [{
    103.         "values": [
    104.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    105.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    106.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    107.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    108.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    109.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    110.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    111.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    112.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    113.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    114.           234.2
    115.         ]
    116.       }]
    117.     };
    118.  
    119.     zingchart.render({
    120.       id: 'myChart',
    121.       data: myConfig,
    122.       height: 400,
    123.       width: "100%"
    124.     });
    125.   </script>
    126. </body>
    127.  
    128. </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.   "preview": {
    4.     "handle-left": {
    5.       "background-color": "#ff6666",
    6.       "border-color": "#6666ff",
    7.       "alpha": 0.8,
    8.       "border-radius": "15px",
    9.       "border-width": 2,
    10.       "height": "50px",
    11.       "width": "10px"
    12.     },
    13.     "handle-right": {
    14.       "background-color": "#ff6666",
    15.       "border-color": "#6666ff",
    16.       "alpha": 0.8,
    17.       "border-radius": "15px",
    18.       "border-width": 2,
    19.       "height": "50px",
    20.       "width": "10px"
    21.     },
    22.     "handle-top": {
    23.       "background-color": "#6666ff",
    24.       "border-color": "#ff6666",
    25.       "alpha": 0.8,
    26.       "border-radius": "15px",
    27.       "border-width": 2,
    28.       "height": "10px",
    29.       "width": "50px"
    30.     },
    31.     "handle-bottom": {
    32.       "background-color": "#6666ff",
    33.       "border-color": "#ff6666",
    34.       "alpha": 0.8,
    35.       "border-radius": "15px",
    36.       "border-width": 2,
    37.       "height": "10px",
    38.       "width": "50px"
    39.     }
    40.   },
    41.   "scale-x": {
    42.     "zooming": true,
    43.     "zoom-to": [10, 90],
    44.     "item": {
    45.       "font-size": 10
    46.     }
    47.   },
    48.   "scale-y": {
    49.     "zooming": true,
    50.     "zoom-to": [50, 300],
    51.     "values": "0:350:50",
    52.     "guide": {
    53.       "line-style": "dotted"
    54.     },
    55.     "item": {
    56.       "font-size": 10
    57.     }
    58.   },
    59.   "plot": {
    60.     "line-width": 1,
    61.     "line-color": "#4d9900",
    62.     "background-color": "#4d9900",
    63.     "marker": {
    64.       "size": 3,
    65.       "background-color": "#ccccff #6666ff",
    66.       "border-width": 1,
    67.       "border-color": "#4d9900"
    68.     },
    69.     "tooltip": {
    70.       "visible": false
    71.     }
    72.   },
    73.   "crosshair-x": {
    74.     "plot-label": {
    75.       "text": "%v"
    76.     },
    77.     "scale-label": {
    78.       "visible": false
    79.     }
    80.   },
    81.   "crosshair-y": {
    82.     "type": "multiple",
    83.     "scale-label": {
    84.       "visible": false
    85.     }
    86.   },
    87.   "series": [{
    88.     "values": [
    89.       138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    90.       136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    91.       184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    92.       122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    93.       108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    94.       249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    95.       279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    96.       225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    97.       258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    98.       237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    99.       234.2
    100.     ]
    101.   }]
    102. };
    103.  
    104. zingchart.render({
    105.   id: 'myChart',
    106.   data: myConfig,
    107.   height: 400,
    108.   width: "100%"
    109. });