| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>BCT Pie Chart 01</title>
|
| <link href="https://playground.anychart.com/8doHVA1j/iframe" rel="canonical">
|
| <meta content="Circle Chart,Pie Chart,3D Chart,3D Pie Chart,Tooltip" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.11.0/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript"><div id="anychart-embed-samples-bct-3d-pie-chart" class="anychart-embed anychart-embed-samples-bct-3d-pie-chart">
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-core.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-pie.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.11.0/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <div id="ac_style_samples-bct-3d-pie-chart" style="display:none;">
|
| html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; }
|
| </div>
|
| <script>(function(){
|
| function ac_add_to_head(el){
|
| var head = document.getElementsByTagName('head')[0];
|
| head.insertBefore(el,head.firstChild);
|
| }
|
| function ac_add_link(url){
|
| var el = document.createElement('link');
|
| el.rel='stylesheet';el.type='text/css';el.media='all';el.href=url;
|
| ac_add_to_head(el);
|
| }
|
| function ac_add_style(css){
|
| var ac_style = document.createElement('style');
|
| if (ac_style.styleSheet) ac_style.styleSheet.cssText = css;
|
| else ac_style.appendChild(document.createTextNode(css));
|
| ac_add_to_head(ac_style);
|
| }
|
| ac_add_link('_deps/cdn.anychart.com/releases/8.11.0/css/anychart-ui.min_qe95e7e741b.css');
|
| ac_add_style(document.getElementById("ac_style_samples-bct-3d-pie-chart").innerHTML);
|
| ac_add_style(".anychart-embed-samples-bct-3d-pie-chart{width:100%;height:100%;}");
|
| })();</script>
|
| <div id="container"></div>
|
| <script>
|
| anychart.onDocumentReady(function () {
|
|
|
|
|
| var data = [
|
| ['Pre-Sale', 30],
|
| ['VC and Team', 10],
|
| ['Liquidity', 15],
|
| ['Airdrop', 10],
|
| ['Roadmap Dev', 15],
|
| ['CEX Listing1', 10],
|
| ['CEX Listing2', 10]
|
| ];
|
|
|
|
|
| var chart = anychart.pie3d(data);
|
|
|
| chart.labels().fontFamily("arial");
|
| chart.labels().fontSize(11);
|
| chart.labels().fontDecoration("bold");
|
| chart.labels().fontColor("#372E27")
|
| chart.labels().fontWeight(900);
|
|
|
| chart.legend().fontColor("black");
|
| chart.legend().fontSize(12);
|
| chart.legend().fontWeight(900);
|
| chart.legend().fontStyle("bold");
|
|
|
|
|
| chart.container("container");
|
|
|
| chart.legend().position('bottom');
|
|
|
| chart.legend().itemsLayout('horizontal-expandable');
|
| chart.background().fill({color: 'red', opacity: 0});
|
| chart.tooltip().format("Percentage: {%value}%");
|
|
|
| chart.draw();
|
| });
|
| </script>
|
| </body>
|
| </html> |
