我在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{
}
答案 0 :(得分:1)