如何将文本包装在Google可视化树形图的每个矩形或图块中,以便不会使用省略号截断单词,而是尝试填充图块?
例如,US的标签会在下面截断。
treemap.html:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
[{v:'Global', f:'Gbl'}, null, 0, 0],
[{v:'America', f:'AM'}, 'Global', 0, 0],
[{v:'Europe', f:'EU'}, 'Global', 0, 0],
[{v:'Asia', f:'AS'}, 'Global', 0, 0],
[{v:'Australia', f:'AU'}, 'Global', 0, 0],
[{v:'Africa', f:'AF'}, 'Global', 0, 0],
[{v:'Brazil', f:'BR'}, 'America', 11, 10],
[{v:'USA', f:'USSSS SSSS SSSSS SSSSS SSSSSS SSSSS SSSSSS SSSS SSSS SSSSS SSSSS SSSS SSSS SSSS SSSSS SSSSSS SSSSSS SSSSSS SSS SSSS SSSSS SSS SSSS SSS SSSS'}, 'America', 52, 31],
[{v:'Mexico', f:'MX'}, 'America', 24, 12],
[{v:'Canada', f:'CA'}, 'America', 16, -23],
[{v:'France', f:'FR'}, 'Europe', 42, -11],
[{v:'Germany', f:'DE'}, 'Europe', 31, -2],
[{v:'Sweden', f:'SE'}, 'Europe', 22, -13],
[{v:'Italy', f:'IT'}, 'Europe', 17, 4],
[{v:'UK', f:'UK'}, 'Europe', 21, -5],
[{v:'China', f:'CH'}, 'Asia', 36, 4],
[{v:'Japan', f:'JP'}, 'Asia', 20, -12],
[{v:'India', f:'IN'}, 'Asia', 40, 63],
[{v:'Laos', f:'LA'}, 'Asia', 4, 34],
[{v:'Mongolia', f:'MO'}, 'Asia', 1, -5],
[{v:'Israel', f:'IS'}, 'Asia', 12, 24],
[{v:'Iran', f:'IR'}, 'Asia', 18, 13],
[{v:'Pakistan', f:'PA'}, 'Asia', 11, -52],
[{v:'Egypt', f:'EG'}, 'Africa', 21, 0],
[{v:'S. Africa', f:'SA'}, 'Africa', 30, 43],
[{v:'Sudan', f:'SU'}, 'Africa', 12, 2],
[{v:'Congo', f:'CO'}, 'Africa', 10, 12],
[{v:'Zaire', f:'ZA'}, 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
maxDepth: 4,
headerHeight: 15,
showTooltips: true,
fontColor: 'black'
};
var chart_div = document.getElementById('chart_div');
var tree = new google.visualization.TreeMap(chart_div);
tree.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 1600px; height: 900px;"></div>
</body>
</html>
如果可以使用Google可视化树形图,请告知我们。我在github网站上看到了FR,但它已经有好几年了。
如果谷歌可视化无法做到这一点,是否还有其他javascript包来创建嵌套树图,其中包含this等节点中名称的自动换行?