在网页上的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专业版
• .NET 4.0
• IIS 7.0
• 报告服务2008
• ReportViewer控件版本10

Answer 1

原因

ReportViewer控件将图表呈现为PNG图像.中的ReportViewer增加width,height以及min-width性能的CSS的图像.这些CSS属性会导致图像在浏览器中缩小到稍小的尺寸.图像缩放导致观察到的模糊.

解析度

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

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

(此示例中的唯一值是MyOfficeChart.)

当图表呈现为a时<img>,<img>标记alt和title属性将设置为此值.

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

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

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