area chart fill-opacity issue in c3js and angular

问题:

I have created a line chart using c3.js and angular 2.But i am getting a unwanted black area in line chart.It's working more likely chart with filled area.I am trying to override it's css property..."fill-opacity". but it's not working.Give me a solution.enter image description here

回答1:

Due to c3 lib CSS is missing. CSS file for C3 chart .

https://rawgit.com/masayuki0812/c3/master/c3.css.

回答2:

copy past css into your bar-chart.component.css and add encapsulation in decorator as shown in e.g. It will definitely work :->

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,
    });
   }
}