在网页上的ReportViewer控件中呈现时，Reporting Services图表文本模糊

Question

问题

我们使用Reporting Services报告和ReportViewer控件在网页上呈现条形图。有时图表上的文字很清晰：

但大部分时间，图表上的文字都很模糊：

发生了什么事？

需要解决的步骤和其他信息

• 广泛搜索网络和SO
• 尝试过不同的浏览器，用户和机器;无法确定押韵或模糊的理由
• 尝试了多个SSRS报告属性DynamicHeight和DynamicWidth
的设置
• 在Firefox中，右键单击图表图像并选择查看图像时，显示的图像始终清晰
• 这个问题在有边框的图表上显得更为突出;删除了图表上的边框，但问题仍然存在

影响浏览器

• Firefox 15.0
• Chrome 23.0.1271.97 m
• IE 9但仅在浏览器模式下= IE9，文档模式= IE9标准

环境

• Visual Studio 2010 Pro
• .NET 4.0
• IIS 7.0
• Reporting Services 2008
• ReportViewer控件版本10

Answer 1

<强>原因

ReportViewer控件将图表呈现为PNG图像。 ReportViewer将width，height和min-width属性添加到图像的CSS中。这些CSS属性会导致图像在浏览器中缩放到稍微较小的大小。图像缩放会导致观察到的模糊。

解决

通过使用额外的CSS覆盖ReportViewer呈现的多个CSS属性，在我们的环境中解决了该问题。 Reporting Services图表在BIDS中被赋予一个特殊标记，因此CSS选择器可以找到受影响的图像。

步骤1.为图表提供其ToolTip属性的唯一值：

（此示例中的唯一值是 MyOfficeChart 。）

当图表呈现为<img>时，<img>标记的alt和title属性会设置为此值。

步骤2.创建CSS以按<img>属性的唯一值选择title，并覆盖导致问题的CSS：

img[title$='MyOfficeChart']
{
    height:auto !important;
    width:auto !important;
    min-width:0 !important;
}

这些步骤解决了所有浏览器和用户的问题，以及图表是否有边框。

Answer 2

通过将矩形直接放入Tablix单元格，然后将图表放在该矩形内部，可以轻松解决此问题。 （而不是将图表直接放在tablix单元格中。）

不是100％肯定它为什么会起作用......但确实如此。

Answer 3

这不是正确的解决方案，但可以提供帮助。步骤如下：

1. 在报告构建器中打开报告rdl
2. 选择图表的文字，模糊
3. 在字体样式中键入'C'（在顶部菜单上），然后按enter
4. 字体样式更改但未知
5. 尝试运行并查看差异