剑道角度图表并排答案

【问题标题】：Kendo Angular Charts side by side剑道角度图表并排
【发布时间】：2018-05-16 17:26:12
【问题描述】：

我正在尝试将剑道角度图表并排放置，但它们一直在堆叠。我正在使用 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>

【问题讨论】：

标签： angular telerik kendo-ui-angular2 kendo-chart

【解决方案1】：

“col-md-6”元素必须位于具有 class="row" 的元素内，引导布局才能正常工作：

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

【讨论】：