• 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: 'bar',
    18.       plot: {
    19.         valueBox: {
    20.           text: '%v<br>±%node-error-plus',
    21.           fontFamily: 'Times New Roman',
    22.           fontColor: 'black',
    23.           fontWeight: 'normal',
    24.           fontSize: 12,
    25.           placement: 'top',
    26.           offsetY: '-20px',
    27.         },
    28.         errors: [
    29.           [5],
    30.           [4],
    31.           [5],
    32.           [6],
    33.           [4],
    34.         ],
    35.         error: {
    36.           lineColor: '#00aaff',
    37.           lineWidth: 1,
    38.           hoverState: {
    39.             lineColor: 'blue',
    40.             lineStyle: 'dashed'
    41.           }
    42.         },
    43.         barSpace: 0,
    44.         barsSpaceLeft: '20%',
    45.         barsSpaceRight: '20%',
    46.         hoverState: {
    47.           lineColor: 'blue',
    48.           lineStyle: 'dashed'
    49.         }
    50.       },
    51.       scaleY: {
    52.         values: '0:80:20',
    53.         guide: {
    54.           lineStyle: 'dotted'
    55.         }
    56.       },
    57.       series: [{
    58.           values: [35, 40, 59, 65, 33],
    59.           backgroundColor: '#003344'
    60.         },
    61.         {
    62.           values: [30, 31, 50, 55, 29],
    63.           backgroundColor: '#005c99'
    64.         }
    65.       ]
    66.     };
    67.  
    68.     zingchart.render({
    69.       id: 'myChart',
    70.       data: chartConfig,
    71.       height: 400,
    72.       width: '100%'
    73.     });
    74.   </script>
    75. </body>
    76.  
    77. </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: 'bar',
    3.   plot: {
    4.     valueBox: {
    5.       text: '%v<br>±%node-error-plus',
    6.       fontFamily: 'Times New Roman',
    7.       fontColor: 'black',
    8.       fontWeight: 'normal',
    9.       fontSize: 12,
    10.       placement: 'top',
    11.       offsetY: '-20px',
    12.     },
    13.     errors: [
    14.       [5],
    15.       [4],
    16.       [5],
    17.       [6],
    18.       [4],
    19.     ],
    20.     error: {
    21.       lineColor: '#00aaff',
    22.       lineWidth: 1,
    23.       hoverState: {
    24.         lineColor: 'blue',
    25.         lineStyle: 'dashed'
    26.       }
    27.     },
    28.     barSpace: 0,
    29.     barsSpaceLeft: '20%',
    30.     barsSpaceRight: '20%',
    31.     hoverState: {
    32.       lineColor: 'blue',
    33.       lineStyle: 'dashed'
    34.     }
    35.   },
    36.   scaleY: {
    37.     values: '0:80:20',
    38.     guide: {
    39.       lineStyle: 'dotted'
    40.     }
    41.   },
    42.   series: [{
    43.       values: [35, 40, 59, 65, 33],
    44.       backgroundColor: '#003344'
    45.     },
    46.     {
    47.       values: [30, 31, 50, 55, 29],
    48.       backgroundColor: '#005c99'
    49.     }
    50.   ]
    51. };
    52.  
    53. zingchart.render({
    54.   id: 'myChart',
    55.   data: chartConfig,
    56.   height: 400,
    57.   width: '100%'
    58. });