小编Hop*_*ope的帖子

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

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

ngx-chart 的 Stackblitz 演示

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

angular ngx-charts

Hop*_*ope

2020 02-24

3
推荐指数

1
解决办法

5270
查看次数

为来自其他父组件的 div 提供动态 ID

我有一个如下所示的图表组件：

<div id="chart">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

Run Code Online (Sandbox Code Playgroud)

我正在通过它的父 div 来操作该图表的所有样式，其中有id="chart"，但我需要在父组件中使用同一组件 2 次！所以这会产生相同的 2 个 id 的问题。

因此，我决定从父组件传递 div 的 id，如下所示@Input()：

<div class="container">
    <!-- Other tags -->
    <child-component [chartId]="users"></child-component>
    <!-- Other tags -->
    <child-component [chartId]="visuals"></child-component>
    <!-- Other tags -->
</div>

Run Code Online (Sandbox Code Playgroud)

编辑子组件：

TS 文件：

@Input() chartId: string;

Run Code Online (Sandbox Code Playgroud)

HTML：

<div [id]="chartId">
    <ngx-charts-bar-horizontal [view]="view" [trimYAxisTicks]="false" [xAxisTickFormatting]="convertDecimalToNumber" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [showXAxisLabel]="showXAxisLabel" [showDataLabel]="showDataLabel" [xAxisLabel]="xAxisLabel" [barPadding]="40">
    </ngx-charts-bar-horizontal>
</div>

Run Code Online (Sandbox Code Playgroud)