如何更改 AmChart 图形的笔画宽度属性？

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，它为什么会在背景周围显示边框，但是你可以尝试一些技巧。

首先，我们需要使用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 问题。