ngx-图表不应用卡号样式。

Question

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

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>

但结果是

​

​

如你所见，卡片是不分开的

Answer 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