Google Charts：如何增加工具提示的宽度

Posted 2021-04-09

我正在使用Google Charts柱形图。

如果您观察到服务器计算时间值被破坏到下一行，请执行此操作。根据要求，它应该在同一行。请帮助我解决方案

答案

设置图表选项tooltip以确保显示html工具提示

  tooltip: {
    isHtml: true
  }

然后你可以覆盖工具提示类， 使用以下css来防止包装...

.google-visualization-tooltip-item {
  white-space: nowrap;
}

另一答案

尝试在此类.google-visualization-tooltip上添加一些CSS属性：

.google-visualization-tooltip { width:300px; background-color: red; }

如下例所示：https://jsfiddle.net/zrmwtj3z/

另一答案

最佳解决方案是不要手动增加工具提示的宽度。相反，在工具提示的HTML中，将整个内容包装在div元素中。使用CSS样式white-space: nowrap;强制它保持在同一行。我也想添加margin: 1em;以使它看起来更好一些。