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

Question

我正在使用ngx-charts [Github Repo 链接]在 Angular 中绘制图表。我正在使用 Angular 8.x 版本。这个软件包非常易于使用并且具有良好的功能。但是，我似乎无法更改水平条形图中水平条的默认样式。这里我附上了我尝试过的 stackblitz 演示。我希望所有水平条的底部都有红色边框，并且我希望 Y 轴数据标签位于条上方。

ngx-chart 的 Stackblitz 演示

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

Answer 1

我不确定这是否会对您有帮助，但在我看来，这是实现您目标的方法之一。

SVG有一个stroke-dasharray用于描边的属性。

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

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

其中是栏的宽度Y值，是栏的高度和宽度之和的值。X

我正在分享 SVG 描边属性的演示，这不是 ngx 图表演示，但在我看来，如果您可以获得图表元素的高度和宽度，它将对您有所帮助。

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