ngx-charts：通过使用属性绑定更新 dom 元素来更改图表

Question

我想通过从 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() {

}

}

Answer 1

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>