我有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>