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

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 启用类名应用到图表元素。属性(property)。

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 问题。