2016-11-10 8 views
1

저는 Angular 2에서 다른 차트 라이브러리를 테스트 중이므로 D3, Flot, uvChart 등과 같은 다른 차트 라이브러리 위에 serval 지시문을 작성했습니다. C3 차트를 작성한 후, 나는 C3 this is the image에서 이상한 그래프를 가지고Angular2 C3 차트 색상이 이상하게 작동합니다.

당신은 선 사이의 색상이 검은 색으로 반전, 나는 그것을 마우스를 가져 가면 툴팁 색상이 여기에

내 코드의 일부입니다 화이트 색상에 반전된다 볼 수

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

아니라, 그것은 몇 일이었다, 아무도 내 질문에 대답하지 않습니다. 나는 혼자서 그것을 풀었다. 문제는 차트 구성 요소에 있습니다. 각 차트 지시문에 대한 .css 파일에 해당하는 styleUrls 링크를 포함해야합니다.

+0

몇 가지 사항을 받으려면 녹색 물음표와 함께 정답으로 선택하십시오 :) – jhhoff02

+1

조언 해 주셔서 감사합니다. –