问题描述
我正在做一个 ngx-line-chart 并使用 referenceLines 输入添加了一条线。问题是这条线几乎不明显,因为默认情况下它以与 相同但更不透明的颜色出现。
我尝试使用 customColors 属性如下:
customColors = {referenceLines: ['#cc0000']}
然而,这没有用。
我也尝试过使用该方案,但也找不到影响此的方法
有谁知道一种覆盖它的方法,这样我就可以把它变成红色或任何其他颜色,让它更引人注目?
谢谢
解决方法
ReferenceLines 是 {name: string,value: number} 的 Object[]。因此,首选方式并没有提供一种干净的方式来指定参考(网格)线颜色。
来自 GitHub 的源代码:
<svg:g *ngFor="let refLine of referenceLines">
<svg:g *ngIf="showRefLines" [attr.transform]="transform(refLine.value)">
<svg:line
class="refline-path gridline-path-horizontal"
x1="0"
[attr.x2]="gridLineWidth"
[attr.transform]="gridLineTransform()"
/>
<svg:g *ngIf="showRefLabels">
<title>{{ tickTrim(tickFormat(refLine.value)) }}</title>
<svg:text
class="refline-label"
[attr.dy]="dy"
[attr.y]="-6"
[attr.x]="gridLineWidth"
[attr.text-anchor]="textAnchor"
>
{{ refLine.name }}
</svg:text>
</svg:g>
</svg:g>
可以看出,不幸的是,没有任何颜色应用于参考(网格)线?。既不是直接来自 ReferenceLine 规范({name: string,value: number},也不是来自自定义配色方案。
所以现在剩下两个选项:
- 直接(使用 ng-deep)使用 css 类或 定位正确的 svg 元素
- 为所有具有恒定 y 值的 x 值添加数据系列。
如果我手头有(提供可能由用户交互切换的多条参考线),我选择第二个选项。这是一种(肮脏的)解决方法,可产生所需的功能。