如何在Google Chart的提示框（tooltip）中实现换行？

你遇到的问题核心是自定义HTML类型tooltip未正确绑定到图表，<br>标签没有被识别为HTML内容渲染，修改方案如下： #

核心修改点 #

• 解除view.setColumns的注释，将你定义的HTML类型tooltip列（索引为11）加入配置，让图表启用自定义HTML tooltip渲染
• 若需要在tooltip中展示的轴标签也支持换行，直接将你需要的换行结构写入自定义tooltip列的内容即可，<br>会被正确解析

修正后完整可运行代码 #

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {role: 'tooltip', p:{html:true}}],
        ['2010September', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, '2010<br>September<br>start<br>end'],
      ]);

      var view = new google.visualization.DataView(data);
      // 加入所有系列列 + 自定义HTML tooltip列
      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11]);

      var options = {
        width: 900,
        height: 500,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '100%' },
        isStacked: 'percent',
        tooltip: {isHtml:true},
        series: {
          0: { color: 'red' },
          1: { color: 'green' },
          2: { color: 'red' },
          3: { color: 'green' },
          4: { color: 'red' },
          5: { color: 'green' },
          6: { color: 'red' },
          7: { color: 'green' },
          8: { color: 'red' },
          9: { color: '#03254c' }
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
    }
  </script>
</head>
<body>
  <div id="barchart_values" style="width: 900px; height: 500px;"></div>
</body>
</html>

额外说明 #

如果你不需要完全自定义tooltip内容，只想让默认生成的tooltip支持换行，可使用\n作为换行符，同时关闭tooltip的HTML模式即可生效。

内容的提问来源于stack exchange，提问作者sysOut