ngx-chart 不应用卡号样式答案

【问题标题】：ngx-chart does not apply card number stylengx-chart 不应用卡号样式
【发布时间】：2022-04-29 20:50:48
【问题描述】：

我正在使用 ngx-charts 库来表示信息，我需要使用特定的图表，但样式与我在下面展示的示例不一样：

https://stackblitz.com/edit/vertical-bar-chart-bwghvr?embed=1&file=app/app.component.ts

我的数据：

 colorScheme = {
   domain: ['#FFE800', '#E44D25', '#CFC0BB']
 };

 cardColor: string = '#232837';
 data: any[] = [
  {
    name: "Chile",
    value: "2000"
  },
  {
    name: "Argentina",
    value: "1500"
  },
  {
    name: "Holanda",
    value: "751"
  }
];

还有我的html：

  <div class="row">
    <div class="col-md-12">
        <ngx-charts-number-card
          [view]="[700, 200]"
          [scheme]="colorScheme"
          [results]="data"
          [cardColor]="cardColor"
          [animations]="true"
          [bandColor]="'#00FF48'"
          [innerPadding]="20">
        </ngx-charts-number-card>
     </div>
  </div>

但结果是

你可以看到卡片没有分开

【问题讨论】：

标签： css angular card

【解决方案1】：

可能迟到了，但是，您的 HTML 中的主要问题是您正在使用另一个图表 ngx-charts-number-card 您需要在 ngx-charts-bar-vertical

中覆盖您的 HTML

将此代码用于条形图

<ngx-charts-bar-vertical
  [view]="[700, 200]"
  [scheme]="colorScheme"
  [results]="data"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis">
</ngx-charts-bar-vertical>

阅读文档，我们一清二楚 https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart

【讨论】：