谷歌图表图形多行文本标签答案

【问题标题】：google charts graphics Multiline text labels谷歌图表图形多行文本标签
【发布时间】：2022-02-13 23:42:38
【问题描述】：

对于统计/监控工具，我们使用谷歌图表来显示来自应用程序的消息和错误。这些消息显示在垂直轴上的图形标签中，但大多数时候消息文本太长，标签中包含的字符太多。它们最终被...缩短了，但我们真正想要的是它们是自动换行的，或者如果这不可能，则使用 html br 标签手动换行。太糟糕了，这些只是被谷歌图表标签忽略了。

我的问题是，有没有办法将消息文本分成多行而不是在最后用 ... 进行快捷方式？如果是这样，如何做到这一点？我已经找到了水平轴here 的可能性，但我们希望它具有垂直轴。当然可以的话。

我也尝试做一个提琴手的例子，但似乎提琴手不能很好地处理谷歌图表。当我在我们的工具中制作文本时，整个图形就消失了。

【问题讨论】：

标签： javascript html google-visualization

【解决方案1】：

坐标轴刻度值的文本标签，水平和垂直，目前不能跨多行换行。您可以做的最好的事情是通过使用宽度和chartArea的组合来安排标签的更多空间：{ width and left }选项，垂直轴，或height和chartArea：{height and top }选项。

这里有一个 jsfiddle 演示了这一点：http://jsfiddle.net/dlaliberte/cNRn3/ 带有条形图。关键选项是这样的：

chartArea: { left: 300 }

【讨论】：

是的，我们现在已经这样做了，调整左侧。但在我看来，文本不能多行有点不利。在某些情况下，就像这样，如果该选项可用，它会非常方便。但是太糟糕了，也许谷歌将来有一天会添加它。在那之前，我们只是继续使用左边给文本更多的空间。

【解决方案2】：

我尝试减小字体大小，这对我有用。根据需要调整字体大小，字体变小会自动多行


<Chart
              chartType='ColumnChart'
              width="100%"
              height="800px"
              data={this.state.graphData}
              options={{
                fontSize: 11
              }}
/>

【讨论】：