Angular2 Ngx-Charts错误的布局:下一个组件位于折线图的图例下

时间:2018-07-16 12:12:47

标签: angular layout

我有2个来自ngx图表(https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart)的图表组件,一个折线图和一个条形图。折线图应占一行的70%,条形图应占其一行的30%,并且带有输入框的“ Reservierungen”应与条形图一起显示。另外,“ Reservierungen”不应位于图表图例下方(如屏幕截图所示)。有办法解决吗?

不幸的是,由于信誉不佳,我可能不会发布图片。

这是我的HTML代码:

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">

      <div fxFlex="70%">
        <ngx-charts-line-chart
          [view]="chart_PrognoseService.view"
          [scheme]="chart_PrognoseService.colorScheme"
          [results]="predictionData"
          [gradient]="chart_PrognoseService.gradient"
          [xAxis]="chart_PrognoseService.showXAxis"
          [yAxis]="chart_PrognoseService.showYAxis"
          [legend]="chart_PrognoseService.showLegend"
          [showXAxisLabel]="chart_PrognoseService.showXAxisLabel"
          [showYAxisLabel]="chart_PrognoseService.showYAxisLabel"
          [xAxisLabel]="chart_PrognoseService.xAxisLabel"
          [yAxisLabel]="chart_PrognoseService.yAxisLabel"
          [tooltipDisabled]="chart_PrognoseService.tooltipDisabled"
          [autoScale]="chart_PrognoseService.autoScale"
          [timeline]="chart_PrognoseService.timeline">
        </ngx-charts-line-chart>
      </div>


      <h2>Reservierungen</h2>
      <p>Bitte Demonstrator-ID sowie Start und Endzeit eingeben:</p>
      <input [(ngModel)]="DemoID" placeholder="Demonstrator-ID">
      <input [(ngModel)]="start" placeholder="2018-07-10T09:29:00Z">
      <input [(ngModel)]="end" placeholder="2018-07-12T00:14:49Z">

      <button class="btn btn-danger float-xl-middle" 
          (click) ="getChartsData()">  Daten abrufen
        </button> 

      <div fxFlex="30%" *ngIf="dataArray?.length>0; else noChartBlock">
          <p>Bar-Chart für Demonstrator mit ID: {{DemoID}}</p>
          <ngx-charts-bar-horizontal-stacked
          [view]="view"
          [scheme]="colorScheme"
          [results]="dataArray"
          [gradient]="gradient"
          [xAxis]="showXAxis"
          [yAxis]="showYAxis"
          [legend]="showLegend"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [xAxisLabel]="xAxisLabel"
          [yAxisLabel]="yAxisLabel"
          (select)="onSelect($event)">
        </ngx-charts-bar-horizontal-stacked>
    </div>
  </div>

0 个答案:

没有答案
相关问题