Question

我使用Morris.js制作图表。 Morris.js使用SVG绘制图形。我在这里设置了一个JSbin：JSbin example

Morris.js使用Raphael绘制svg图。问题在于X轴上的标签。当标签尺寸太大时，它们会消失。我修改了包含图形和标签字体大小的div元素的大小，但由于标签是为各种用户动态生成的，所以我无法确定固定值。理想的解决方案是将文本包裹起来。如何应对这种情况呢？ Morris.js使用以下代码段来生成text svg元素。

 this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);

Answer 1

看来raphael通过在文本中加上“\ n”来支持多行字符串。这可能是一个廉价的解决方案，系统地在您的标签中用“\ n”替换“\ n”。

另一个（更棘手的）解决方案是用一个允许自动换行的外来元素替换raphael生成的SVG中的“text”元素：

<foreignObject x="20" y="10" width="150" height="200">
   <p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p>
</foreignObject>

或者如果您需要后备：

<switch>
  <foreignObject x="160" y="10" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p></foreignObject>
  <text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

我不知道用异物替换“文本”的最佳方法：在Morris渲染之后或者通过黑客攻击Morris / Raphael。

Answer 2

我认为问题定义需要更多澄清，

在我的结尾，你发送的代码工作正常，我也在JSFIDDLE复制了同样正常工作的代码。

我认为标签问题是自动完成的，因为我测试了你保持的默认尺寸在查看CSS时的宽度为385px，而在查看相同的时候是518px，在这两种情况下渲染的标签都不同，事实上超出一定宽度的标签未呈现。因此，设置样式和覆盖是没有意义的。

我认为这些东西是建在图书馆里的。所以它还有很长的路要走，或者改变图书馆。

让我知道哪种方便，我会相应地帮助你:)。

编辑：但是，您可以更改GridTextSize的属性：默认情况下为16

Fiddle2我已更新

'gridTextSize：8'显示大小为8的所有文本。

不完美但会做：）

Answer 3

从there下载未最小化的morris.js。在zip-archive中，您可以找到文件 morris.js 。在编辑模式下打开它并更改默认标签角度参数的值（第133行）：

133 |     xLabelAngle: 90,//original value 0

现在，如果你真的需要它最小化，你可以通过任何在线js压缩工具压缩文件。

SVG文本在较大的标签上消失

3 个答案: