Question

我使用角度为2的ngx-charts创建了1个组件图表，数据正在从data.ts中提取，没有任何问题。

现在，我想知道我是否可以重复使用我在上面创建的相同组件并显示具有不同数据集的第二个图表，比如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>

Answer 1

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

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

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

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

1 个答案: