• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background-color: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       width: 100%;
    15.       height: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24.  
    25. <body>
    26.   <div id="myChart" class="chart--container">
    27.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    28.   </div>
    29.   <script>
    30.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    31.     let chartConfig = {
    32.       type: 'radar',
    33.       plot: {
    34.         aspect: 'area',
    35.         animation: {
    36.           effect: 3,
    37.           sequence: 1,
    38.           speed: 700,
    39.         },
    40.       },
    41.       scaleV: {
    42.         visible: false,
    43.       },
    44.       scaleK: {
    45.         values: '0:5:1',
    46.         labels: ['Dogs', 'Cats', 'Fish', 'Birds', 'Reptiles', 'Horses'],
    47.         guide: {
    48.           alpha: 0.3,
    49.           backgroundColor: '#c5c5c5 #718eb4',
    50.           lineColor: '#607D8B',
    51.           lineStyle: 'solid',
    52.         },
    53.         item: {
    54.           backgroundColor: 'white',
    55.           borderColor: '#aeaeae',
    56.           borderRadius: '10px',
    57.           borderWidth: '1px',
    58.           fontColor: '#607D8B',
    59.           padding: '5 10',
    60.         },
    61.         refLine: {
    62.           lineColor: '#c10000',
    63.         },
    64.         tick: {
    65.           lineColor: '#59869c',
    66.           lineWidth: '2px',
    67.           lineStyle: 'dotted',
    68.           size: 20,
    69.         },
    70.       },
    71.       series: [{
    72.           values: [59, 39, 38, 19, 21, 35],
    73.           text: 'farm',
    74.         },
    75.         {
    76.           values: [20, 20, 54, 41, 41, 35],
    77.           backgroundColor: '#689F38',
    78.           lineColor: '#53a534',
    79.         },
    80.       ],
    81.     };
    82.  
    83.     zingchart.render({
    84.       id: 'myChart',
    85.       data: chartConfig,
    86.       height: '100%',
    87.       width: '100%',
    88.     });
    89.   </script>
    90. </body>
    91.  
    92. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <div id="myChart" class="chart--container">
    12.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </html>
    1. .zc-body {
    2.   background-color: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   width: 100%;
    7.   height: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let chartConfig = {
    2.   type: 'radar',
    3.   plot: {
    4.     aspect: 'area',
    5.     animation: {
    6.       effect: 3,
    7.       sequence: 1,
    8.       speed: 700,
    9.     },
    10.   },
    11.   scaleV: {
    12.     visible: false,
    13.   },
    14.   scaleK: {
    15.     values: '0:5:1',
    16.     labels: ['Dogs', 'Cats', 'Fish', 'Birds', 'Reptiles', 'Horses'],
    17.     guide: {
    18.       alpha: 0.3,
    19.       backgroundColor: '#c5c5c5 #718eb4',
    20.       lineColor: '#607D8B',
    21.       lineStyle: 'solid',
    22.     },
    23.     item: {
    24.       backgroundColor: 'white',
    25.       borderColor: '#aeaeae',
    26.       borderRadius: '10px',
    27.       borderWidth: '1px',
    28.       fontColor: '#607D8B',
    29.       padding: '5 10',
    30.     },
    31.     refLine: {
    32.       lineColor: '#c10000',
    33.     },
    34.     tick: {
    35.       lineColor: '#59869c',
    36.       lineWidth: '2px',
    37.       lineStyle: 'dotted',
    38.       size: 20,
    39.     },
    40.   },
    41.   series: [{
    42.       values: [59, 39, 38, 19, 21, 35],
    43.       text: 'farm',
    44.     },
    45.     {
    46.       values: [20, 20, 54, 41, 41, 35],
    47.       backgroundColor: '#689F38',
    48.       lineColor: '#53a534',
    49.     },
    50.   ],
    51. };
    52.  
    53. zingchart.render({
    54.   id: 'myChart',
    55.   data: chartConfig,
    56.   height: '100%',
    57.   width: '100%',
    58. });