完整的代码取自anychart,背景发生了变化
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.test{
height: 20em;
border: 1px solid;
padding:0;
}
</style>
</head>
<body>
<div class="col-md-12 ">
<div class="col-md-4 test"><div id="container"></div></div><div class="col-md-4">hello2</div><div class="col-md-4">hello3</div>
</div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js
var data = getData();
var dataSet = anychart.data.set(data);
var colors = anychart.scales.ordinalColor().colors(['#26959f', '#f18126', '#3b8ad8', '#60727b', '#e24b26']);
// create tag cloud
chart = anychart.tagCloud();
chart.background().fill({
keys: ['#ccc'],
});
// set chart title
chart.title('World Population')
// set data with settings
.data(dataSet)
// set color scale
.colorScale(colors)
// set array of angles, by which words will be placed
.angles([-90, 0, 90]);
// get the color range
var colorRange = chart.colorRange();
// enabled color range
colorRange
.enabled(true)
// sets color line size
.colorLineSize(15);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// save normal fill function to variable
var normalFillFunction = chart.normal().fill();
// save hover fill function to variable
var hoveredFillFunction = chart.hovered().fill();
// create custom interactivity to hover colorRange
chart.listen('pointsHover', function(e) {
if (e.actualTarget === colorRange) {
// if points exist
if (e.points.length) {
// set settings for normal state
chart.normal({
fill: 'black 0.1'
});
// set settings for hovered state
chart.hovered({
// get fill color ratio by its number and set fill to hovered state
fill: chart.colorScale().valueToColor(e.point.get('category'))
});
} else {
// set function for normal state
chart.normal({
fill: normalFillFunction
});
// set function for hovered state
chart.hovered({
fill: hoveredFillFunction
});
}
}
});
});
</script>
</body>
</html>