Kendo Angular 并排图表

Question

我试图并排放置 kendo angular 个图表，但它们一直在堆叠。我正在使用 bootstrap col-md-6 并尝试了其他样式，但是 kendo-chart 元素没有任何意义，它们一直占据整行并堆叠。删除 style="display:inline-block;" 仍然不起作用。这是我在 html:

中得到的

<div class="col-md-12">
    <div class="col-md-6" style="display:inline-block;">
            <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
    <div class="col-md-6" style="display:inline-block;">
            <kendo-chart>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [title]="{ text: 'Miles' }"
                                                     [min]="0" [max]="100">
                        </kendo-chart-value-axis-item>
                    </kendo-chart-value-axis>
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item [categories]="categories2">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-series>
                      <kendo-chart-series-item [data]="series2" type="line">
                      </kendo-chart-series-item>
                    </kendo-chart-series>
                  </kendo-chart>
    </div>
</div>

Answer 1

"col-md-6" 元素需要位于具有 class="row" 的元素内，bootstrap 布局才能工作：

BOOTSTRAP GRID SYSTEM

 <div class="row">
    <div class="col-md-6">
            <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
    <div class="col-md-6">
           <kendo-chart [categoryAxis]="{ categories: categories }">
                    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
                    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
                    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
                    <kendo-chart-series>
                        <kendo-chart-series-item *ngFor="let item of series"
                            type="line" [data]="item.data" [name]="item.name">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>
    </div>
</div>

EXAMPLE

Kendo Angular 并排图表

Kendo Angular Charts side by side

telerik

kendo-chart

kendo-ui-angular2

angular