Html c3js和angular 2中的面积图填充不透明度问题

我已经使用c3.js和angular 2创建了一个折线图。但我在折线图中得到了一个不需要的黑色区域。它更像是使用填充区域的图表。我正在尝试覆盖它的css属性…“填充不透明度”。但它不起作用。给我一个解决方案。

由于缺少c3库CSS。C3图表的CSS文件

---

将过去的css复制到您的bar-chart.component.css中，并在decorator中添加封装，如所示。 它肯定会起作用：->

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import * as c3 from 'c3';
import * as d3 from 'd3';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css'], //copy and paste css here
  encapsulation: ViewEncapsulation.None     //add this line in your component
})

export class BarChartComponent implements OnInit {
  jsonData : any[] = [];
  jsonKeys : any = {};
  jsonAxis : any = {};

  constructor() { }

  ngOnInit() {
    this.jsonData = [
                      {name: 'www.site1.com', upload: 200, download: 150, total: 400},
                      {name: 'www.site2.com', upload: 100, download: 300, total: 400},
                      {name: 'www.site3.com', upload: 300, download: 200, total: 500},
                      {name: 'www.site4.com', upload: 400, download: 100, total: 500},
                    ];
    this.jsonKeys = {
                      x: 'name', // it's possible to specify 'x' when category axis
                      value: ['upload', 'download'],
    };
    this.jsonAxis = {
                      x : {
                          type : 'category'
                      }
    };

    let chart = c3.generate({
      bindto: '#chart',
      data: {
        json: this.jsonData,
        keys: this.jsonKeys,
      },
      axis: this.jsonAxis,
    });
   }
}

---

请添加一些代码示例错误是什么？可能是您缺少c3.css文件。检查您的控制台，看看它是否正在加载，是否在正确的位置。检查行的实际路径元素，查看是否应用了带有

fill:none

的

.c3路径

规则。