Angular2 C3图表颜色很奇怪

时间:2016-11-10 21:02:39

标签: angular charts c3.js

我在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{

}

1 个答案:

答案 0 :(得分:1)

好吧,已经过了几天,没有人回答我的问题。我自己解决了。问题出在图表组件中,我必须将styleUrls链接包含在每个图表指令的相应.css文件中。