Kendo Angular Charts бок о бок - PullRequest
Новая
       10

Kendo Angular Charts бок о бок

0 голосов
/ 16 мая 2018

Я пытаюсь поставить угловые диаграммы кендо рядом, но они продолжают складываться.Я использую bootstrap col-md-6 и пробовал другие стили, но элементы кендо-диаграммы ничего не уважают, и они продолжают занимать весь ряд и укладываться.Удаление стиля = "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>

1 Ответ

0 голосов
/ 16 мая 2018

Элементы col-md-6 должны находиться внутри элемента с class = "row", чтобы макет начальной загрузки работал:

СИСТЕМА BOOTSTRAP GRID 

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

ПРИМЕР

...