如何让Kendo Angular Charts横向并排？Bootstrap布局无效

我之前也踩过这个坑，你遇到的核心问题是：Kendo Chart的宿主元素和内部生成的SVG默认会占满整个可用宽度，就算你用了Bootstrap的col-md-6，也会因为这个默认布局规则导致图表堆叠而不是并排。下面是几个能快速解决的调整方案：

1. 修复Bootstrap网格结构 #

首先你的外层容器用col-md-12是错误的，Bootstrap的网格系统要求列必须放在row容器里，否则列的浮动和间距规则不会生效。把外层的col-md-12替换成row是第一步。

2. 强制Kendo Chart遵守父容器宽度 #

给<kendo-chart>元素添加样式，让它继承父col-md-6的宽度，同时阻止内部SVG撑破容器：设置width: 100%; display: block;即可，不需要额外的inline-block。

修改后的完整代码 #

<div class="row">
  <div class="col-md-6">
    <kendo-chart 
      [categoryAxis]="{ categories: categories }"
      style="width: 100%; display: block;"
    >
      <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
      style="width: 100%; display: block;"
    >
      <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>

3. 进阶：通过Kendo Chart配置控制宽度 #

如果上面的样式调整还不够稳定，你可以直接在Kendo Chart的配置里指定chartArea的宽度，让图表严格适应父容器：

// 在你的组件类中添加配置项
public chartLayoutConfig = {
  chartArea: {
    width: '100%'
  }
};

然后在模板中绑定这个配置：

<kendo-chart [options]="chartLayoutConfig">
  <!-- 图表内容 -->
</kendo-chart>

这样做的好处是让Kendo Chart自身就遵循容器的宽度限制，而不是依赖外部样式强制约束，适配性会更好。

内容的提问来源于stack exchange，提问作者Kevin