我正在使用 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);
最佳答案
似乎 raphael 通过在文本中放置 "\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>
我不知道用异物替换“文本”的最佳方法:在莫里斯渲染之后或通过入侵莫里斯/拉斐尔。