修改ngx-charts的内部CSS [英] Modifying the inner CSS of ngx-charts

问题描述

当我启动ngx-charts 高级饼图示例时，我传说中的数字被切断了.深入CSS，这似乎是因为margin-top设置为-6px:

When I spun up the ngx-charts Advanced Pie Chart example, my legend's numbers get cut off. Digging into the CSS, this seems to be because of a margin-top being set to -6px:

在浏览器中进行了实验之后，我发现10px使事情看起来像我想要的.因此，在组件的CSS中，我添加了:

After experimenting in the browser, I've found that 10px makes things look as I'd like. So in the component's CSS, I added:

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

但是，这根本不影响图例项的CSS.我已经尝试过在!important，::ng-deep和其他版本上进行变体，但是我似乎并没有影响CSS.

However, this doesn't affect the CSS of the legend items at all. I've tried variations on !important, ::ng-deep and more, but nothing I do seems to affect that CSS.

如何修改legend-item的CSS，以使其具有适当的边距?

How can I modify the CSS of the legend-item so that it will have the proper margin?

下面是我复制截图的全部内容:

Below is my full component to reproduce the screenshot:

pietest.component.ts

pietest.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pietest',
  templateUrl: './pietest.component.html',
  styleUrls: ['./pietest.component.css']
})
export class PietestComponent {

  view: any[] = [1000, 500];

  single: any[] = [
    {
      "name": "Germany",
      "value": 8940000
    },
    {
      "name": "USA",
      "value": 5000000
    },
    {
      "name": "France",
      "value": 7200000
    },
      {
      "name": "UK",
      "value": 6200000
    }
  ];

  // options
  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = false;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() { }
}

pietest.component.html

pietest.component.html

<ngx-charts-advanced-pie-chart
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  >
</ngx-charts-advanced-pie-chart>

pietest.component.css

pietest.component.css

.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

推荐答案

在"@ swimlane/ngx-charts":"^ 9.0.0"中不会发生此问题.但是，如果要更改版本中的样式来解决此问题，请在pietest.component.scss中使用以下代码.

This problem doesn't occur in "@swimlane/ngx-charts": "^9.0.0". However if you want to change the style in your version to solve this, use the below code in your pietest.component.scss.

/deep/ .advanced-pie-legend /deep/ .legend-items-container /deep/ .legend-items /deep/ 
.legend-item /deep/ .item-value {
    margin-top: 10px !important;
}

请注意，上面的代码将应用于与规则匹配的整个应用程序，因为在执行此操作时，该代码未封装在组件中，这类似于将以下代码放入您的style.scss.

Please be remind that the above code will apply to your whole application that match the rule since it's not encapsulated within your component when you do this and it is similar with putting the below code into your style.scss.

.advanced-pie-legend .legend-items-container .legend-items.legend-item .item-value {
    margin-top: 10px !important;
}

这篇关于修改ngx-charts的内部CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！