Question

我正在使用AmCharts图表生成报告，效果很好。当我将页面转换为pdf并且每个图表周围出现黑色笔划时，问题就出现了。帧。当我查看html时，我发现了以下内容：

<path cs="100,100" d="M0.5,0.5 L609.5,0.5 L609.5,549.5 L0.5,549.5 L0.5,0.5 Z"
fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-
opacity="0" transform="translate(10,0)"></path>

我可以编辑行不透明度和线条颜色，它可以在html中工作但是当我使用wkhtmltopdf转换为pdf时，这些会被忽略，我会在每个图表周围得到黑色笔画。我该怎么做才能避免这种情况？

Answer 1

你看到的是图表背景元素。它在屏幕上看不到，因为它默认为零不透明度。我不太熟悉wkhtmltopdf（我正在使用没有那个问题的PhantomJS）所以我不确定为什么它会在不透明度为0时显示背景边框，但是你可以尝试一些技巧。 / p>

首先，我们需要使用addClassNames属性为图表元素启用类名应用。

AmCharts.makeChart( "chartdiv", {
  ...
  "addClassNames": true,
  ...
} );

有问题的SVG节点将附加class="amcharts-bg"。现在你可以通过CSS定位它了：

.amcharts-bg, .amcharts-plot-area {
  stroke-width: 0!important;
}

如果您还没有使用它，或者直接隐藏整个背景：

.amcharts-bg, .amcharts-plot-area {
  display: none;
}

我希望这足以解决wkhtmltopdf问题。

如何更改AmChart图的stroke-width属性？

1 个答案: