更改 ngx-charts 中水平条的默认样式

Question

我正在使用 ngx-charts [Link to Github Repo] 在 Angular 中制作图表。我正在使用 Angular 的 8.x 版本。这个包真的很容易使用，并具有很好的功能。但是，我似乎无法更改水平条形图中水平条的默认样式。在这里，我附上了我试过的 stackblitz 演示。我想要所有水平条底部的红色边框，我还想要水平条上方的 Y 轴数据标签。

Stackblitz Demo of ngx-chart

问题是生成的条形图是 svg 格式的。所以它变得有点棘手。

Answer 1

没有为此目的提供句柄，但您始终可以像这样调整 svg 以获得所需的更改：

let svgList = <HTMLScriptElement[]><any>document.getElementById(your_parent_Div_id).getElementsByTagName('path');

for (let svg of svgList) {
    event.target.style.stroke = 'black';
    event.target.style.strokeWidth = '4';
}

Answer 2

ngx-chart 使用 svgs 因此您可以通过 css:

编辑它们

::ng-deep .ngx-charts .bar {
  stroke: red;
}

Stackblitz demo

Answer 3

我不确定这是否对您有帮助，但我认为这是实现您目标的一种方式。

笔划有 stroke-dasharray SVG 属性。

对于 border-bottom 我找到了下面描述的解决方案：

::ng-deep .ngx-charts .bar {
    stroke: red;
    stroke-dasharray: 0,X,Y,0;
}

其中 Y 是条形 Width 的值，X 是 sum 的值 的 Height 和 width 的栏。

我正在分享一个 SVG 笔划的演示属性这不是一个 ngx 图表演示，但在我看来，如果你能获得图表元素的高度和宽度，它会对你有所帮助。

https://codepen.io/coderman-401/pen/dyoNgKg

更改 ngx-charts 中水平条的默认样式

Change default styling of horizontal bars in ngx-charts

angular

ngx-charts