兩個數據集一個組件，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>

來源

2017-04-04 brohymn

您可以多次重複使用您的組件。你可以傳遞數據'' – Erevald

我得到了**因爲它不是已知的屬性，所以不能綁定到'data'猜測我需要編寫一個輸出類，然後輸入Input（）方法...將嘗試 – brohymn

我想我回答我自己的問題。因爲我使用的是ngx-charts。我沒有注意到它有一個[結果]選項，這基本上是@Erevald的建議。因此數據選項已經內置。所以答案基本上是添加另一個HTML標記。

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

之後，使用ngx-chart建議修改TS文件，就是這樣。

來源

2017-04-04 19:35:48 brohymn

兩個數據集一個組件，ngx-charts，angular 2

回答

相關問題