4

I am using Morris.js for making charts. Morris.js uses SVG to draw the graphs. I have set up a JSbin here: JSbin example

Morris.js uses Raphael to draw the svg graphs. The issue is with the labels on the X-Axis. They disappear when the size of labels is too large. I tinkered around with the size of the div element holding the graph and font size of the labels but since the labels are dynamically generated for various users I cannot decide on a fixed value. An ideal solution would be to have the text wrapped up. What can be done to counter the situation? Morris.js uses the following snippet to make the text svg element.

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

3 回答 3

4

raphael 似乎通过在文本中添加“\n”来支持多行字符串。这对您来说可能是一个便宜的解决方案，系统地将标签中的“”替换为“\n”。

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

<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>

我不知道用外来对象替换“文本”的最佳方法：在莫里斯渲染之后或通过破解莫里斯/拉斐尔。

于 2013-11-01T17:33:04.670 回答
3

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

133 |     xLabelAngle: 90,//original value 0

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

于 2013-11-04T02:56:59.840 回答
3

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

最后，您发送的代码可以正常工作，我也复制了相同的代码，也JSFIDDLE可以正常工作..

我认为标签问题是自动完成的，因为我已经测试了您保留的默认尺寸在查看 CSS 时携带宽度 385px，在看起来相同时携带宽度 518px，在这两种情况下呈现的标签都不同，实际上标签超过了某些宽度未呈现。所以设置样式和覆盖没有意义。

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

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

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

Fiddle2这里我更新了

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

不完美但会做:)

于 2013-10-29T07:10:27.767 回答