javascript - 如何更改 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 问题。