CSS未應用於Angular 2應用程序中的C3.js圖表

我已經在Angular 2應用程序中實現了C3.js圖表，但C3.css文件中的樣式未應用於它。我知道它正在加載（我將事件全部複製到我的組件的scss文件中），但仍然無法正常工作。是否因爲圖表加載後的CSS？有誰知道如何解決這個問題？CSS未應用於Angular 2應用程序中的C3.js圖表

我在ngOnInit中異步獲取圖表的數據，因此我在考慮在繪製圖表之前應用css（發生在接收數據時）。我也在想，這可能是Angular扔掉選擇器的東西。

ngOnInit() { 
    // draw pie chart 
    this.bitcoinService.getMapData() 
     .subscribe(data => { 
      var pieChartData = this.formatPieChartData(data); 
      this.pieChartInit(pieChartData); // call this.pieChartInit 
     }) 
} 


pieChartInit(data) { 
    var chart = c3.generate({ 
     data: { 
      columns: data, // example: [['data1', 30], ['data2', 120]] 
      type: 'pie' 
     } 
});

我複製了C3 CSS直接進入我的SCSS其中包括像這裏面的作品在我的組件一切：

@Component({ 
    moduleId: module.id, 
    selector: 'bitcoin-dashboard', 
    styles: [require('./bitcoin-dashboard.component.scss')], 
    template: require('./bitcoin-dashboard.component.html') 
})

此外，當我d3.select圖表的後一個元素pieChartInit被調用，樣式工作。例如：

d3.selectAll('.c3-chart-arc path').style('stroke', 'white')

任何幫助，非常感謝！

來源

2016-08-17 georgej

你能添加一些代碼，顯示迄今爲止您嘗試過的內容？ –

@georgej在這裏看到我的詳細答案：http://stackoverflow.com/a/42189051/704894 –

-1

CSS加載時無關緊要。一旦它被加載它被應用。機會是CSS命名空間在工作，並阻止瀏覽器匹配從C3 CSS的類。在加載完所有內容後，在Chrome中檢查dom和類。

來源

2017-02-01 05:34:47 Ketan

-1

非角度代碼添加的HTML不會添加樣式封裝屬性，因此樣式不適用。您可以使用/deep/（和別名>>>不與SASS雖然工作）來解決：

:host /deep/ .c3-chart-arc path { 
    stroke: white; 
}

參見

來源

2017-02-11 11:23:29

CSS未應用於Angular 2應用程序中的C3.js圖表​​

回答

相關問題

CSS未應用於Angular 2應用程序中的C3.js圖表