如何使用谷歌图表打破工具提示中的线条？

Question

I'm trying to break a line in the code below, but I can't.我试图在下面的代码中换行，但我做不到。

this is the complete code这是完整的代码

<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}}],
        ['2010<br>September', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start<br>end'],
      ]);

      var view = new google.visualization.DataView(data);
      //view.setColumns([ 1, 2, 3, 4, 5, 6, 7, 8, 9,10]);

      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>

Note that I put a br to break the line, but it doesn't work请注意，我放了一个 br 来打破这条线，但它不起作用

'2010<br>September'

If I take the Range at the beginning of the array it will give an error.如果我在数组的开头取 Range，它会报错。 This makes it not have the tooltip with the html enabled.这使得它没有启用 html 的工具提示。

[EDIT] I tested putting  [编辑]我测试了放置 and it didn't work但没有用

How do I break the line?我该如何断线？

Answer 1

Use white-space: pre-wrap;使用white-space: pre-wrap; in the css and in the code use \n在 css 和代码中使用\n

 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', { type: 'string', role: 'tooltip', 'p': { 'html': true } }], [ '2010\nSeptember', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start\nend' ], ] ); var view = new google.visualization.DataView(data); 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); }

 .google-visualization-tooltip { border: solid 1px #bdbdbd; border-radius: 2px; background-color: white; position: absolute; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); font-size: 11px; -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); font-family: arial; white-space: pre-wrap; }.google-visualization-tooltip div { padding:5px; }

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="barchart_values" style="width: 900px; height: 500px;"></div> </body> </html>

如何使用谷歌图表打破工具提示中的线条？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-09-26 13:23:47

如何使用谷歌图表打破工具提示中的线条？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-09-26 13:23:47

解决方案1
1 已采纳 2021-09-26 13:23:47