我想通过从Dom更改它来更改ngx图表并在属性绑定中插入新的图表,但是更改Dom由[innerHTML] = stringVar完成;但是如果我的stringVar里面是ngx-chart元素,它就不会渲染它。
import { Component, OnInit } from '@angular/core';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single, multi } from '../../shared/data';
import { CHARTS } from '../../shared/mock-charts';
@Component({
selector: 'app-chart-graph',
template: '<div [innerHTML]="ChartGraph"></div>',
styleUrls: ['./chart-graph.component.css']
})
export class ChartGraphComponent implements OnInit {
ChartGraph = `<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>`;
single: any[];
multi: any[];
CHARTS: any[];
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
constructor() {
Object.assign(this, { single, multi });
}
onSelect(event) {
console.log(event);
}
ngOnInit() {
}
}
答案 0 :(得分:0)
It's not work with property binding just do like add that in template for good practice.
@Component({
selector: 'app-chart-graph',
styleUrls: ['./chart-graph.component.css'],
template: '<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="single"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>'
})
export class ChartGraphComponent implements OnInit {
single: any[];
multi: any[];
CHARTS: any[];
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
//remaining code
}
在模板中添加此项
//you can also add @input() in graph component options pass them in like
<app-chart-graph [width]="" [height]="" [data]=""..></app-chart-graph>
</div>