Question

我在Angular 2应用程序中实现了C3.js图表，但C3.css文件中的样式未应用于它。我知道它正在加载（我将事件全部复制到我的组件的scss文件中），但仍然无法正常工作。是因为图表在css之后加载了吗？有谁知道如何解决这个问题？

我在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中，这个scss包含在我的组件中的其他所有内容中：

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

另外，当我在调用pieChartInit之后选择图表的元素时，样式会起作用。示例：

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

非常感谢任何帮助！

Answer 1

加载CSS时无关紧要。加载后即可应用。机会是CSS命名空间正在起作用并阻止浏览器匹配C3 css中的类。在加载完所有内容后，检查Chrome中的dom和类。

Answer 2

非Angular代码添加的HTML不会添加样式封装属性，因此不会应用样式。您可以使用/deep/（以及不能与SASS一起使用的别名>>>）来解决此问题：

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

另见

CSS未应用于Angular 2 app

2 个答案: