Question

我使用c3.js和angular 2.创建了一个折线图。但是我在折线图中得到了一个不需要的黑色区域。它更有可能在填充区域的图表中工作。我试图覆盖它＆＃39 ; s css property ...＆＃34; fill-opacity＆＃34;。但它没有用。请给我一个解决方案。enter image description here

Answer 1

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

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

Answer 2

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

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

c3js和angular 2中的区域图填充不透明度问题

2 个答案: