两个数据集一个组件，ngx-charts，angular 2

问题描述：

我已经使用ngx-charts在角度2中创建了1个组件图，数据正在从data.ts中拉出来，没有任何问题。两个数据集一个组件，ngx-charts，angular 2

现在，我想知道如果我可以重复使用上面创建的同一个组件，并显示另一个数据集的第二个图表，让我们说data2.ts？...这甚至可能吗？你们能把我指向正确的方向吗？，我需要在这里创建一个指令吗？或者我需要通过属性传递数据？

我在想我可以创建另一个组件，并将一个不同的数据集作为我的最后一个资源，但我可能总共有10个图表，所以这可能不是一个好选择。

更新的代码

graph.component.ts

some imports ... 
@Component({ 
    selector: 'app-graph', 
    templateUrl: './graph.component.html', 
    styleUrls: ['./graph.component.css'] 
}) 
export class GraphComponent { 
    multi: any[]; 


    //options 

    showXAxis = true; 
    showYAxis = true; 

    showLegend = true; 
    showXAxisLabel = true; 
    showYAxisLabel = true; 

    xAxisLabel = 'Slot'; 
    yAxisLabel = 'Utilization (%)'; 
    barPadding = 24; 

    colorScheme = { 
    domain: ['#0866c6', '#ff8c00', '#C0C0C0'] 
    }; 

    constructor() { 
    Object.assign(this, { multi }) 
    } 

    onSelect(event) { 
    console.log(event); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, NgxChartsModule], 
    declarations: [ GraphComponent ], 
    bootstrap: [ GraphComponent ] 
}) 
export class AppModule { }

graph.component.html

<ngx-charts-bar-vertical-stacked 
      [view]="view" 
      [scheme]="colorScheme" 
      [results]="multi" 

      [xAxis]="showXAxis" 
      [yAxis]="showYAxis" 
      [legend]="showLegend" 
      [showXAxisLabel]="showXAxisLabel" 
      [showYAxisLabel]="showYAxisLabel" 
      [xAxisLabel]="xAxisLabel" 
      [yAxisLabel]="yAxisLabel" 
      (select)="onSelect($event)"> 
     </ngx-charts-bar-vertical-stacked>

所以，这是为了显示我的主视图组件mainview.component。 html

<section class="section"> 
       <div class="row "> 
       <app-odometer></app-odometer> 
       <app-graph></app-graph> 
       <app-dateselector></app-dateselector> 
       </div> 
       <div class="row "> 
       <div class="col-xl-3"></div> 
       <app-graph [data]="data"></app-graph> 
       <div class="col-xl-3"></div> 
       </div> 
       <div class="row "> 
       <div class="col-xl-3"></div> 
       <app-graph></app-graph> 
       <div class="col-xl-3"></div> 
       </div> 
      </section>

您可以多次重复使用您的组件。你可以传递数据' chart-component>' – Erevald

我得到了**因为它不是已知的属性，所以不能绑定到'data'猜测我需要编写一个输出类，然后输入Input（）方法...将尝试 – brohymn

答

我想我回答我自己的问题。因为我使用的是ngx-charts。我没有注意到它有一个[结果]选项，这基本上是@Erevald的建议。因此数据选项已经内置。所以答案基本上是添加另一个HTML标记。

<ngx-charts-bar-vertical-stacked  
      [results]="data2"  
</ngx-charts-bar-vertical-stacked>

之后，使用ngx-chart建议修改TS文件，就是这样。

两个数据集一个组件，ngx-charts，angular 2

相关推荐