• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style></style>
    11. </head>
    12.  
    13. <body>
    14.   <div id='myChart'></div>
    15.   <script>
    16.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17.     var myConfig = {
    18.       type: 'line',
    19.       plot: {
    20.         aspect: 'spline',
    21.         marker: {
    22.           size: 3
    23.         },
    24.         error: {
    25.           size: 10
    26.         }
    27.       },
    28.       series: [{
    29.           values: [
    30.             [1.5, 34],
    31.             [2, 55],
    32.             [2.5, 71],
    33.             [3, 42],
    34.             [3.5, 39],
    35.             [4, 50],
    36.             [4.5, 70]
    37.           ],
    38.           lineColor: '#C2185B',
    39.           marker: {
    40.             backgroundColor: '#E3F2FD #0097A7',
    41.             borderColor: '#C2185B'
    42.           },
    43.           errors: [
    44.             [6],
    45.             [4],
    46.             [5],
    47.             [9],
    48.             [6],
    49.             [7],
    50.             [9]
    51.           ],
    52.           error: {
    53.             lineColor: '#0097A7',
    54.             lineStyle: 'dashed'
    55.           }
    56.         },
    57.         {
    58.           values: [
    59.             [5.5, 35],
    60.             [6, 42],
    61.             [6.5, 67],
    62.             [7, 75],
    63.             [7.5, 50],
    64.             [8, 34],
    65.             [8.5, 67]
    66.           ],
    67.           lineColor: '#388E3C',
    68.           marker: {
    69.             backgroundColor: '#E0F7FA #E64A19',
    70.             borderColor: '#388E3C'
    71.           },
    72.           errors: [
    73.             [5],
    74.             [4],
    75.             [6],
    76.             [3],
    77.             [7],
    78.             [4],
    79.             [8]
    80.           ],
    81.           error: {
    82.             lineColor: '#E64A19',
    83.             lineStyle: 'dotted'
    84.           }
    85.         }
    86.       ],
    87.  
    88.       scaleX: {
    89.         values: '1:9:1'
    90.       },
    91.       scaleY: {
    92.         values: '0:100:25',
    93.         guide: {
    94.           lineStyle: 'solid'
    95.         }
    96.       }
    97.     };
    98.  
    99.     zingchart.render({
    100.       id: 'myChart',
    101.       data: myConfig,
    102.       height: 400,
    103.       width: '100%'
    104.     });
    105.   </script>
    106. </body>
    107.  
    108. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14. </body>
    15.  
    16. </html>
    1.  
    1. var myConfig = {
    2.   type: 'line',
    3.   plot: {
    4.     aspect: 'spline',
    5.     marker: {
    6.       size: 3
    7.     },
    8.     error: {
    9.       size: 10
    10.     }
    11.   },
    12.   series: [{
    13.       values: [
    14.         [1.5, 34],
    15.         [2, 55],
    16.         [2.5, 71],
    17.         [3, 42],
    18.         [3.5, 39],
    19.         [4, 50],
    20.         [4.5, 70]
    21.       ],
    22.       lineColor: '#C2185B',
    23.       marker: {
    24.         backgroundColor: '#E3F2FD #0097A7',
    25.         borderColor: '#C2185B'
    26.       },
    27.       errors: [
    28.         [6],
    29.         [4],
    30.         [5],
    31.         [9],
    32.         [6],
    33.         [7],
    34.         [9]
    35.       ],
    36.       error: {
    37.         lineColor: '#0097A7',
    38.         lineStyle: 'dashed'
    39.       }
    40.     },
    41.     {
    42.       values: [
    43.         [5.5, 35],
    44.         [6, 42],
    45.         [6.5, 67],
    46.         [7, 75],
    47.         [7.5, 50],
    48.         [8, 34],
    49.         [8.5, 67]
    50.       ],
    51.       lineColor: '#388E3C',
    52.       marker: {
    53.         backgroundColor: '#E0F7FA #E64A19',
    54.         borderColor: '#388E3C'
    55.       },
    56.       errors: [
    57.         [5],
    58.         [4],
    59.         [6],
    60.         [3],
    61.         [7],
    62.         [4],
    63.         [8]
    64.       ],
    65.       error: {
    66.         lineColor: '#E64A19',
    67.         lineStyle: 'dotted'
    68.       }
    69.     }
    70.   ],
    71.  
    72.   scaleX: {
    73.     values: '1:9:1'
    74.   },
    75.   scaleY: {
    76.     values: '0:100:25',
    77.     guide: {
    78.       lineStyle: 'solid'
    79.     }
    80.   }
    81. };
    82.  
    83. zingchart.render({
    84.   id: 'myChart',
    85.   data: myConfig,
    86.   height: 400,
    87.   width: '100%'
    88. });