1

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 文件）中的购物车太宽。二是标签落后。我更愿意修复图表六，但我至少可以忍受将标签放在前面。

任何建议，谢谢。

4

1 回答 1

1

输出来自 D3 图表。在创建从 x、y、width、height 到矩阵的标签时，我更改了 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]);
于 2016-04-14T14:18:09.423 回答