• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'bar3d',
    25.       fillType: 'radial',
    26.       scaleX: {
    27.         item: {
    28.           color: '#313133'
    29.         },
    30.         backgroundColor: 'none',
    31.         guide: {
    32.           visible: 0
    33.         }
    34.       },
    35.       tooltip: {
    36.         visible: 0
    37.       },
    38.       scaleY: {
    39.         item: {
    40.           color: '#313133'
    41.         },
    42.         backgroundColor: 'none',
    43.         guide: {
    44.           visible: 0
    45.         }
    46.       },
    47.       plot: {
    48.         facets: {
    49.           front: {
    50.             backgroundColor: '#3EA4F9 #0055BF'
    51.           },
    52.           right: {
    53.             backgroundColor: '#3EA4F9 #0055BF'
    54.           },
    55.           left: {
    56.             backgroundColor: '#3EA4F9 #0055BF'
    57.           },
    58.           top: {
    59.             backgroundColor: 'white'
    60.           },
    61.           bottom: {
    62.             backgroundColor: 'white'
    63.           }
    64.         }
    65.  
    66.       },
    67.       series: [{
    68.           values: [69, 68, 54, 48, 70, 74],
    69.           text: 'Apple'
    70.         },
    71.         {
    72.           values: [51, 53, 47, 60, 48, 52],
    73.           text: 'Microsoft'
    74.         },
    75.         {
    76.           values: [42, 43, 30, 40, 31, 48],
    77.           text: 'Oracle'
    78.         },
    79.         {
    80.           values: [25, 15, 26, 21, 24, 26],
    81.           text: 'Dell'
    82.         }
    83.       ]
    84.     };
    85.  
    86.     zingchart.render({
    87.       id: 'myChart',
    88.       data: chartConfig,
    89.       height: '100%',
    90.       width: '100%'
    91.     });
    92.   </script>
    93. </body>
    94.  
    95. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'bar3d',
    3.   fillType: 'radial',
    4.   scaleX: {
    5.     item: {
    6.       color: '#313133'
    7.     },
    8.     backgroundColor: 'none',
    9.     guide: {
    10.       visible: 0
    11.     }
    12.   },
    13.   tooltip: {
    14.     visible: 0
    15.   },
    16.   scaleY: {
    17.     item: {
    18.       color: '#313133'
    19.     },
    20.     backgroundColor: 'none',
    21.     guide: {
    22.       visible: 0
    23.     }
    24.   },
    25.   plot: {
    26.     facets: {
    27.       front: {
    28.         backgroundColor: '#3EA4F9 #0055BF'
    29.       },
    30.       right: {
    31.         backgroundColor: '#3EA4F9 #0055BF'
    32.       },
    33.       left: {
    34.         backgroundColor: '#3EA4F9 #0055BF'
    35.       },
    36.       top: {
    37.         backgroundColor: 'white'
    38.       },
    39.       bottom: {
    40.         backgroundColor: 'white'
    41.       }
    42.     }
    43.  
    44.   },
    45.   series: [{
    46.       values: [69, 68, 54, 48, 70, 74],
    47.       text: 'Apple'
    48.     },
    49.     {
    50.       values: [51, 53, 47, 60, 48, 52],
    51.       text: 'Microsoft'
    52.     },
    53.     {
    54.       values: [42, 43, 30, 40, 31, 48],
    55.       text: 'Oracle'
    56.     },
    57.     {
    58.       values: [25, 15, 26, 21, 24, 26],
    59.       text: 'Dell'
    60.     }
    61.   ]
    62. };
    63.  
    64. zingchart.render({
    65.   id: 'myChart',
    66.   data: chartConfig,
    67.   height: '100%',
    68.   width: '100%'
    69. });