两个数据集一个组件，ngx-charts，角度2答案

【问题标题】：Two data sets one component , ngx-charts , angular 2两个数据集一个组件，ngx-charts，角度2
【发布时间】：2017-08-29 23:33:31
【问题描述】：

我使用 ngx-charts 在角度 2 中创建了 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>

【问题讨论】：

您可以多次重复使用您的组件。可以传递数据<chart-component [data]="dataA"></chart-component>
我得到 无法绑定到“数据”，因为它不是已知属性我猜我需要编写一个导出类，然后是 Input()方法……会试试的

标签： javascript angular typescript d3.js

【解决方案1】：

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

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

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

【讨论】：