• 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: 'gauge',
    18.       scaleR: {
    19.         ring: {
    20.           items: [{
    21.               alpha: 1,
    22.               backgroundColor: '#ffcccc',
    23.               borderColor: 'red',
    24.               borderWidth: 1,
    25.               lineStyle: 'dotted',
    26.               size: 130
    27.             },
    28.             {
    29.               backgroundColor: '#ffb3b3',
    30.               size: 120
    31.             },
    32.             {
    33.               backgroundColor: '#ff9999',
    34.               size: 110
    35.             },
    36.             {
    37.               backgroundColor: '#ff8080',
    38.               size: 100
    39.             },
    40.             {
    41.               backgroundColor: '#ff6666',
    42.               size: 90
    43.             },
    44.             {
    45.               backgroundColor: '#ff4d4d',
    46.               size: 100
    47.             },
    48.             {
    49.               backgroundColor: '#ff3333',
    50.               size: 110
    51.             },
    52.             {
    53.               backgroundColor: '#ff1a1a',
    54.               size: 120
    55.             },
    56.             {
    57.               backgroundColor: 'red',
    58.               size: 130
    59.             }
    60.           ]
    61.         },
    62.         values: '0:90:10'
    63.       },
    64.       series: [{
    65.         values: [35]
    66.       }]
    67.     };
    68.  
    69.     zingchart.render({
    70.       id: 'myChart',
    71.       data: myConfig,
    72.       height: 400,
    73.       width: "100%"
    74.     });
    75.   </script>
    76. </body>
    77.  
    78. </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: 'gauge',
    3.   scaleR: {
    4.     ring: {
    5.       items: [{
    6.           alpha: 1,
    7.           backgroundColor: '#ffcccc',
    8.           borderColor: 'red',
    9.           borderWidth: 1,
    10.           lineStyle: 'dotted',
    11.           size: 130
    12.         },
    13.         {
    14.           backgroundColor: '#ffb3b3',
    15.           size: 120
    16.         },
    17.         {
    18.           backgroundColor: '#ff9999',
    19.           size: 110
    20.         },
    21.         {
    22.           backgroundColor: '#ff8080',
    23.           size: 100
    24.         },
    25.         {
    26.           backgroundColor: '#ff6666',
    27.           size: 90
    28.         },
    29.         {
    30.           backgroundColor: '#ff4d4d',
    31.           size: 100
    32.         },
    33.         {
    34.           backgroundColor: '#ff3333',
    35.           size: 110
    36.         },
    37.         {
    38.           backgroundColor: '#ff1a1a',
    39.           size: 120
    40.         },
    41.         {
    42.           backgroundColor: 'red',
    43.           size: 130
    44.         }
    45.       ]
    46.     },
    47.     values: '0:90:10'
    48.   },
    49.   series: [{
    50.     values: [35]
    51.   }]
    52. };
    53.  
    54. zingchart.render({
    55.   id: 'myChart',
    56.   data: myConfig,
    57.   height: 400,
    58.   width: "100%"
    59. });