• 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.     var myConfig = {
    24.       "type": "bar3d",
    25.       "fill-type": "radial",
    26.       "scaleX": {
    27.         "item": {
    28.           "color": "#313133"
    29.         },
    30.         "background-color": "none",
    31.         "guide": {
    32.           "visible": 0
    33.         }
    34.       },
    35.       "tooltip": {
    36.         "visible": 0
    37.       },
    38.       "scaleY": {
    39.         "item": {
    40.           "color": "#313133"
    41.         },
    42.         "background-color": "none",
    43.         "guide": {
    44.           "visible": 0
    45.         }
    46.       },
    47.       "series": [{
    48.           "values": [69, 68, 54, 48, 70, 74],
    49.           "text": "Apple",
    50.           "facets": {
    51.             "front": {
    52.               "background-color": "#3EA4F9 #0055BF"
    53.             },
    54.             "right": {
    55.               "background-color": "#3EA4F9 #0055BF"
    56.             },
    57.             "left": {
    58.               "background-color": "#3EA4F9 #0055BF"
    59.             },
    60.             "top": {
    61.               "background-color": "white"
    62.             },
    63.             "bottom": {
    64.               "background-color": "white"
    65.             }
    66.           }
    67.         },
    68.         {
    69.           "values": [51, 53, 47, 60, 48, 52],
    70.           "text": "Microsoft",
    71.           "facets": {
    72.             "front": {
    73.               "background-color": "#96ED89 #044D29"
    74.             },
    75.             "right": {
    76.               "background-color": "#96ED89 #044D29"
    77.             },
    78.             "left": {
    79.               "background-color": "#96ED89 #044D29"
    80.             },
    81.             "top": {
    82.               "background-color": "white"
    83.             },
    84.             "bottom": {
    85.               "background-color": "white"
    86.             }
    87.           }
    88.         },
    89.         {
    90.           "values": [42, 43, 30, 40, 31, 48],
    91.           "text": "Oracle",
    92.           "facets": {
    93.             "front": {
    94.               "background-color": "#FFBFB4 #BF1616"
    95.             },
    96.             "right": {
    97.               "background-color": "#FFBFB4 #BF1616"
    98.             },
    99.             "left": {
    100.               "background-color": "#FFBFB4 #BF1616"
    101.             },
    102.             "top": {
    103.               "background-color": "white"
    104.             },
    105.             "bottom": {
    106.               "background-color": "white"
    107.             }
    108.           }
    109.         },
    110.         {
    111.           "values": [25, 15, 26, 21, 24, 26],
    112.           "text": "Dell",
    113.           "facets": {
    114.             "front": {
    115.               "background-color": "#FFF5A5 #FFEC56"
    116.             },
    117.             "right": {
    118.               "background-color": "#FFF5A5 #FFEC56"
    119.             },
    120.             "left": {
    121.               "background-color": "#FFF5A5 #FFEC56"
    122.             },
    123.             "top": {
    124.               "background-color": "white"
    125.             },
    126.             "bottom": {
    127.               "background-color": "white"
    128.             }
    129.           }
    130.         }
    131.       ]
    132.     };
    133.  
    134.     zingchart.render({
    135.       id: 'myChart',
    136.       data: myConfig,
    137.       height: '100%',
    138.       width: '100%'
    139.     });
    140.   </script>
    141. </body>
    142.  
    143. </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. var myConfig = {
    2.   "type": "bar3d",
    3.   "fill-type": "radial",
    4.   "scaleX": {
    5.     "item": {
    6.       "color": "#313133"
    7.     },
    8.     "background-color": "none",
    9.     "guide": {
    10.       "visible": 0
    11.     }
    12.   },
    13.   "tooltip": {
    14.     "visible": 0
    15.   },
    16.   "scaleY": {
    17.     "item": {
    18.       "color": "#313133"
    19.     },
    20.     "background-color": "none",
    21.     "guide": {
    22.       "visible": 0
    23.     }
    24.   },
    25.   "series": [{
    26.       "values": [69, 68, 54, 48, 70, 74],
    27.       "text": "Apple",
    28.       "facets": {
    29.         "front": {
    30.           "background-color": "#3EA4F9 #0055BF"
    31.         },
    32.         "right": {
    33.           "background-color": "#3EA4F9 #0055BF"
    34.         },
    35.         "left": {
    36.           "background-color": "#3EA4F9 #0055BF"
    37.         },
    38.         "top": {
    39.           "background-color": "white"
    40.         },
    41.         "bottom": {
    42.           "background-color": "white"
    43.         }
    44.       }
    45.     },
    46.     {
    47.       "values": [51, 53, 47, 60, 48, 52],
    48.       "text": "Microsoft",
    49.       "facets": {
    50.         "front": {
    51.           "background-color": "#96ED89 #044D29"
    52.         },
    53.         "right": {
    54.           "background-color": "#96ED89 #044D29"
    55.         },
    56.         "left": {
    57.           "background-color": "#96ED89 #044D29"
    58.         },
    59.         "top": {
    60.           "background-color": "white"
    61.         },
    62.         "bottom": {
    63.           "background-color": "white"
    64.         }
    65.       }
    66.     },
    67.     {
    68.       "values": [42, 43, 30, 40, 31, 48],
    69.       "text": "Oracle",
    70.       "facets": {
    71.         "front": {
    72.           "background-color": "#FFBFB4 #BF1616"
    73.         },
    74.         "right": {
    75.           "background-color": "#FFBFB4 #BF1616"
    76.         },
    77.         "left": {
    78.           "background-color": "#FFBFB4 #BF1616"
    79.         },
    80.         "top": {
    81.           "background-color": "white"
    82.         },
    83.         "bottom": {
    84.           "background-color": "white"
    85.         }
    86.       }
    87.     },
    88.     {
    89.       "values": [25, 15, 26, 21, 24, 26],
    90.       "text": "Dell",
    91.       "facets": {
    92.         "front": {
    93.           "background-color": "#FFF5A5 #FFEC56"
    94.         },
    95.         "right": {
    96.           "background-color": "#FFF5A5 #FFEC56"
    97.         },
    98.         "left": {
    99.           "background-color": "#FFF5A5 #FFEC56"
    100.         },
    101.         "top": {
    102.           "background-color": "white"
    103.         },
    104.         "bottom": {
    105.           "background-color": "white"
    106.         }
    107.       }
    108.     }
    109.   ]
    110. };
    111.  
    112. zingchart.render({
    113.   id: 'myChart',
    114.   data: myConfig,
    115.   height: '100%',
    116.   width: '100%'
    117. });