1

我正在使用 JavaScript 渲染器生成几个绘图，配置为适合可用宽度。相关代码如下所示：

<div id="sales-plot">Loading...</div>

#sales-plot{
    width: 30%;
    height: 275px;
}


FusionCharts.setCurrentRenderer("javascript");
var salesPlot = null;
$("#sales-plot").each(function(){
    salesPlot = new FusionCharts("/js/FusionCharts/Pie2D.swf",
                                 "fc-" + this.id, "100%", "100%", debugMode);
    salesPlot.setJSONUrl("/data/sales-plot.json";);
    salesPlot.render(this.id);
});

到目前为止，一切都很好。当用户打印页面时出现问题：绘图占用 A4 纸张中可用宽度的两倍。我尝试调整我的打印 CSS 代码，但我碰壁了——显然，FusionCharts 计算并硬编码了图形的像素尺寸：

<svg height="275" version="1.1" width="379" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none; cursor: default; position: relative;
background-color: rgb(255, 255, 255);">

当我使用 CSS 来减小<svg>元素或其任何祖先的宽度时，我只会得到一个裁剪图：

@media print{
    #sales-plot{
        width: 5cm;
        height: 3cm;
    }
}

该图保持其原始大小，因此它溢出了容器。FusionChart 在我调整窗口大小时调整图表大小，但显然不是在我打印时。

这有一个简单的解决方法吗？

编辑：我在 Google 上搜索了如何制作 SVG 图形比例以适应其外部容器，并且我编写了一个 JavaScript hack 来进行此类修改：

function handleDrawComplete(eventObject, argumentsObject){
    var $svg = $("svg", eventObject.sender.ref);
    var w = argumentsObject.width;
    var h = argumentsObject.height;

    $svg
        .attr("viewBox", "0 0 " + w + " " + h)
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("width", "100%")
        .attr("height", "100%");
    $svg[0].clientWidth = 5000;
    $svg[0].width = 5000;
    $svg[0].pixelUnitToMillimeterX = 0.8;
}

现在有趣的是，我可以使用浏览器开发工具将生成的代码复制到静态 HTML 页面并以正确的尺寸打印图形，但动态生成的图形完全忽略 CSS 打印规则。我已经编写了代码，这就是它在我的 Windows 7 计算机上的外观（屏幕截图来自 Firefox 22，并且已重新采样到 50%；我所有其他浏览器都表现出相同的行为）：

屏幕

屏幕

打印

（生成的 A4 PDF）

打印

4

0 回答 0