Angular2 C3 图表颜色很奇怪

Question

我正在 Angular 2 上测试不同的图表库，所以我在不同的图表库之上编写了 serval 指令，例如 D3、Flot、uvChart 等在我做了一个C3图表之后，我从C3得到了一个奇怪的图表this is the image

你可以看到线条之间的颜色反转为黑色，当我悬停它时，工具提示颜色变为白色

这是我的部分代码

c3.directive.ts:

import { Directive, ElementRef, Renderer, Input } from '@angular/core';
declare var jQuery: any;
declare var c3: any;

@Directive({
  selector: '[c3-chart]'
})

export class C3ChartDirective {
  $el: any;
  @Input() data: any;
  @Input() options: string;

  constructor(el: ElementRef, renderer: Renderer) {
    this.$el = jQuery(el.nativeElement);
  }

  ngOnInit(): void {
    this.render();
  }

  // c3 chart render function
  render(): void {
    let elementID = '#' + this.$el.attr('id');
    console.log(elementID);

    let chart = c3.generate({
    bindto: elementID,
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
  }
}

c3.module.ts:

import { NgModule } from '@angular/core';
import { C3ChartDirective } from './index';

@NgModule({
  declarations: [
    C3ChartDirective
  ],
  exports: [
    C3ChartDirective
  ]
})

export class C3Module{

}

Answer 1

嗯，好几天了，没人回答我的问题。我自己解决了。问题出在图表组件中，我必须包含 styleUrls link 以对应每个图表指令的 .css 文件。

Angular2 C3 图表颜色很奇怪

Angular2 C3 chart color is acting weird

charts

c3.js

angular