Question

http://jsfiddle.net/jjhii/46bv10db/1/

<canvas id="canvas" width="800px" height="600px">data</canvas>
canvg(document.getElementById('canvas'), svg);

另一种观点，更容易看到问题。 http://jsfiddle.net/46bv10db/5/

在上面的示例中，您可以看到右侧标签位于PNG文件中图表后面的位置。原始图表右侧有这些标签。基本上概念上存在两个问题。第一个是打印输出中的购物车太宽（PNG文件）。第二是标签落后。我宁愿修复图表六，但我至少可以把标签放在前面。

任何建议，谢谢。

Answer 1

输出来自D3图表。在从x，y，width，height到matrix创建标签时，我更改了attr函数。 PNG文件现在是正确的。请注意，注释掉的行是我删除的内容。

    var x = (width + 5).toString();
    var y1 = ((height / 4) + (30 * i) + 5).toString();
    var y2 = ((height / 4) + (30 * i)).toString();

    focus.append("svg:text")
        //.attr("dx", x)
        //.attr("dy", y2)
        //.attr("width", "100")
        //.attr("height", "10")
        //.attr("class", "rightLabel")
        //.attr("text-anchor", "left")
        .attr("transform", "matrix(1, 0, 0, 1, " + x + ", " + y2 + ")")
        .attr("font-family", "ArialMT")
        .attr("font-size", "12")
        .text(rightText[i]);

使用canvg打印时，购物车标签位于图表后面

1 个答案: