• 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.     let chartConfig = {
    17.       type: 'area',
    18.       series: [{
    19.         values: [30, 34, 15, 16, 31, 35]
    20.       }],
    21.       labels: [{
    22.           x: '5%',
    23.           y: '20%',
    24.           text: 'Label 0',
    25.           backgroundColor: '#f90',
    26.           borderColor: '#f60',
    27.           borderRadius: -5,
    28.           borderWidth: 2,
    29.           callout: true,
    30.           calloutHeight: 30,
    31.           calloutPosition: 'bottom',
    32.           calloutWidth: 0,
    33.           padding: 10,
    34.           shadow: true,
    35.           calloutTip: {
    36.             type: 'circle',
    37.             backgroundColor: '#fff',
    38.             borderWidth: 2,
    39.             borderColor: '#f60',
    40.             size: 5,
    41.             shadow: true
    42.           }
    43.         },
    44.         {
    45.           x: '15%',
    46.           y: '30%',
    47.           text: 'Label 1',
    48.           backgroundColor: '#f90',
    49.           borderColor: '#f60',
    50.           borderRadius: 5,
    51.           borderWidth: 2,
    52.           callout: true,
    53.           calloutHeight: 6,
    54.           calloutPosition: 'left',
    55.           calloutWidth: 10,
    56.           padding: 10,
    57.           shadow: true,
    58.           calloutTip: {
    59.             alpha: 0.3,
    60.             type: 'diamond',
    61.             backgroundColor: '#fff',
    62.             borderWidth: 2,
    63.             borderColor: '#f60',
    64.             size: 5,
    65.             shadow: true
    66.           }
    67.         },
    68.         {
    69.           x: '35%',
    70.           y: '40%',
    71.           text: 'Label 2',
    72.           backgroundColor: '#f90',
    73.           borderColor: '#f60',
    74.           borderRadius: 5,
    75.           borderWidth: 2,
    76.           callout: true,
    77.           calloutHeight: 30,
    78.           calloutPosition: 'top',
    79.           calloutWidth: 0,
    80.           padding: 10,
    81.           shadow: true,
    82.           calloutTip: {
    83.             type: 'cross',
    84.             lineColor: '#f60',
    85.             lineWidth: 2,
    86.             size: 5,
    87.             shadow: true
    88.           }
    89.         },
    90.         {
    91.           x: '70%',
    92.           y: '60%',
    93.           text: 'Label 3',
    94.           padding: 10,
    95.           backgroundColor: '#f90',
    96.           borderColor: '#f60',
    97.           borderRadius: 5,
    98.           borderWidth: 2,
    99.           callout: true,
    100.           calloutHeight: 10,
    101.           calloutHook: [500, 150],
    102.           calloutOffset: 20,
    103.           calloutPosition: 'top',
    104.           calloutWidth: 0,
    105.           shadow: true,
    106.           calloutTip: {
    107.             type: 'arrow',
    108.             lineColor: '#f60',
    109.             lineWidth: 2,
    110.             size: 5,
    111.             shadow: true
    112.           }
    113.         }
    114.       ]
    115.     };
    116.  
    117.     zingchart.render({
    118.       id: 'myChart',
    119.       data: chartConfig,
    120.       height: 400,
    121.       width: '100%'
    122.     });
    123.   </script>
    124. </body>
    125.  
    126. </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. let chartConfig = {
    2.   type: 'area',
    3.   series: [{
    4.     values: [30, 34, 15, 16, 31, 35]
    5.   }],
    6.   labels: [{
    7.       x: '5%',
    8.       y: '20%',
    9.       text: 'Label 0',
    10.       backgroundColor: '#f90',
    11.       borderColor: '#f60',
    12.       borderRadius: -5,
    13.       borderWidth: 2,
    14.       callout: true,
    15.       calloutHeight: 30,
    16.       calloutPosition: 'bottom',
    17.       calloutWidth: 0,
    18.       padding: 10,
    19.       shadow: true,
    20.       calloutTip: {
    21.         type: 'circle',
    22.         backgroundColor: '#fff',
    23.         borderWidth: 2,
    24.         borderColor: '#f60',
    25.         size: 5,
    26.         shadow: true
    27.       }
    28.     },
    29.     {
    30.       x: '15%',
    31.       y: '30%',
    32.       text: 'Label 1',
    33.       backgroundColor: '#f90',
    34.       borderColor: '#f60',
    35.       borderRadius: 5,
    36.       borderWidth: 2,
    37.       callout: true,
    38.       calloutHeight: 6,
    39.       calloutPosition: 'left',
    40.       calloutWidth: 10,
    41.       padding: 10,
    42.       shadow: true,
    43.       calloutTip: {
    44.         alpha: 0.3,
    45.         type: 'diamond',
    46.         backgroundColor: '#fff',
    47.         borderWidth: 2,
    48.         borderColor: '#f60',
    49.         size: 5,
    50.         shadow: true
    51.       }
    52.     },
    53.     {
    54.       x: '35%',
    55.       y: '40%',
    56.       text: 'Label 2',
    57.       backgroundColor: '#f90',
    58.       borderColor: '#f60',
    59.       borderRadius: 5,
    60.       borderWidth: 2,
    61.       callout: true,
    62.       calloutHeight: 30,
    63.       calloutPosition: 'top',
    64.       calloutWidth: 0,
    65.       padding: 10,
    66.       shadow: true,
    67.       calloutTip: {
    68.         type: 'cross',
    69.         lineColor: '#f60',
    70.         lineWidth: 2,
    71.         size: 5,
    72.         shadow: true
    73.       }
    74.     },
    75.     {
    76.       x: '70%',
    77.       y: '60%',
    78.       text: 'Label 3',
    79.       padding: 10,
    80.       backgroundColor: '#f90',
    81.       borderColor: '#f60',
    82.       borderRadius: 5,
    83.       borderWidth: 2,
    84.       callout: true,
    85.       calloutHeight: 10,
    86.       calloutHook: [500, 150],
    87.       calloutOffset: 20,
    88.       calloutPosition: 'top',
    89.       calloutWidth: 0,
    90.       shadow: true,
    91.       calloutTip: {
    92.         type: 'arrow',
    93.         lineColor: '#f60',
    94.         lineWidth: 2,
    95.         size: 5,
    96.         shadow: true
    97.       }
    98.     }
    99.   ]
    100. };
    101.  
    102. zingchart.render({
    103.   id: 'myChart',
    104.   data: chartConfig,
    105.   height: 400,
    106.   width: '100%'
    107. });