Question

我正在使用 ngx图 [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 的值栏的高度和宽度。

我正在共享SVG笔触属性的演示，这不是ngx图表演示，但我认为，如果可以获取图表元素的高度和宽度，它将为您提供帮助。

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

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

3 个答案: