Angular nvd3 折线图上的黑色背景

Question

我正在尝试使用 angular-nvd3 库实现 angular D3 折线图。我们使用 AngularJS 1.6 和 ES6。 angular-nvd3 的接线方式如下：

app.js

import angularnvd3 from '../node_modules/angular-nvd3/index';
export default angular.module('myApp', othermodules,..angularnvd3)
.
.

controller.js

this.linechartOptions = {
    chart: {
      type: 'lineChart',
      height: 300,
      width:500,
      x: function(d){ return d.x },
      y: function(d){ return d.y },
      useInteractiveGuideline: true,
      xAxis: {
          axisLabel: 'X Label'
      },
      yAxis: {
          axisLabel: 'Y Label',
      },
    },
    title: {
      enable: true,
      text: 'Some text',
      css: {
        'font-size' : '15px',
        'font-weight' : 'bold',
        'text-align' : 'left'
      }
    },
};

this.linechartData = [{
    values: lineChartData,
    key: 'Some Key',
    color: '#1f77b4'
}]

template.html

<nvd3 options="controller.linechartOptions" data="controller.linechartData"></nvd3>

但是，图表被绘制成黑色背景。

我一直在参考这些资源：

但是我不知道如何删除黑色背景和创建填充区域的线条。我只需要查看上面提到的 plunker 中显示的折线图。

Answer 1

只需包含 node_modules/nvd3/build/nv.d3.css 中的 nv.d3.css 即可解决此问题。

Angular nvd3 折线图上的黑色背景

Black background on Angular nvd3 LineChart

css

d3.js

nvd3.js

linechart