< html> < head> < scriptsrc = " https://cdn.anychart.com/releases/v8/js/anychart-base.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/js/anychart-circle-packing.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/themes/dark_blue.min.js" > </ script> < scriptsrc = " https://cdn.anychart.com/releases/v8/themes/dark_provence.min.js" > </ script> < linkhref = " https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type = " text/css" rel = " stylesheet" > < linkhref = " https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type = " text/css" rel = " stylesheet" > < styletype = " text/css" >
html,
body,
#container {
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
</ style> </ head> < body> < divid = " container" > </ div> < script>
anychart. onDocumentReady ( function ( ) {
anychart. theme ( 'darkProvence' ) ;
anychart. data. loadJsonFile (
'https://cdn.anychart.com/samples/circle-packing/ancient-greek-philosophers/data.json' ,
function ( data ) {
var treeData = anychart. data. tree ( data, 'as-table' ) ;
var chart = anychart. circlePacking ( treeData) ;
var palette = anychart. theme ( ) [ 0 ] ? anychart. theme ( ) [ 0 ] . palette. items : anychart. palettes. defaultPalette;
chart. fill ( function ( ) {
return palette[ this . depth] ;
} ) ;
chart. hovered ( ) . fill ( function ( ) {
return anychart. color. darken ( palette[ this . depth] , this . depth / 10 + 0.1 ) ;
} ) ;
chart. labels ( ) . anchor ( 'center-top' ) . offsetY ( '5%' ) ;
chart. container ( 'container' ) ;
chart. draw ( ) ;
}
) ;
} ) ;
</ script> </ body> </ html> Copy