當我啟動 ngx-charts高級餅圖示例時，我的圖例數字被切斷。深入研究 CSS，這似乎是因為margin-top設置為-6px：在瀏覽器中進行實驗后，我發現這10px使得事情看起來像我想要的那樣。所以在組件的 CSS 中，我添加了：.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value { margin-top: 10px !important;}但是，這根本不會影響圖例項的 CSS。我已經嘗試過等方面的變體，但我所做的一切似乎都不會影響該 CSS !important。::ng-deep如何修改 CSS 使其legend-item具有適當的邊距？下面是我重現屏幕截圖的完整組件：pietest.component.tsimport { 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<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [gradient]="gradient" ></ngx-charts-advanced-pie-chart>pietest.component.css.advanced-pie-legend.legend-items-container.legend-items.legend-item .item-value { margin-top: 10px !important;}
2 回答
侃侃無極
TA貢獻2051條經驗 獲得超10個贊
此問題不會出現在“@swimlane/ngx-charts”：“^9.0.0”中。但是，如果您想更改版本中的樣式來解決此問題，請在您的pietest.component.scss.
/deep/ .advanced-pie-legend /deep/ .legend-items-container /deep/ .legend-items /deep/
.legend-item /deep/ .item-value {
margin-top: 10px !important;
}
請注意，上面的代碼將適用于符合規則的整個應用程序，因為當您使用時它不再封裝在您的組件中，/deep/這與將下面的代碼放入您的style.scss.
.advanced-pie-legend .legend-items-container .legend-items.legend-item .item-value {
margin-top: 10px !important;
}
瀟瀟雨雨
TA貢獻1833條經驗 獲得超4個贊
此代碼應該消除 CSS 組件封裝，以便您可以覆蓋您的樣式
添加 encapsulation: ViewEncapsulation.None 到文件@Component中的部分pietest.component.ts。
- 2 回答
- 0 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消