Google可视化树图的每个图块中的文字/文本换行

时间:2017-04-26 01:07:45

标签: javascript google-visualization

如何将文本包装在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等节点中名称的自动换行?

0 个答案:

没有答案