Kendo Angular 图表根据大小更改图例位置

Question

我正在为 Angular 使用 Kendo 图表组件。在全尺寸屏幕上，我希望图例组件位于主图表的右侧，但在小屏幕和移动设备上，它会变得有点局促，因此为了提高响应速度，我想将其移至小屏幕图表的底部.

问题是位置是图例标签上的一个单独属性，而不是样式，据我所知我无法进行媒体查询来更改它...

我用 Google 搜索了一下，发现了很多关于如何定位图例的信息，但没有根据大小动态地进行定位。有没有办法做到这一点我想念的？我对响应式 html/css 还是半新手，所以完全有可能我遗漏了一些简单的东西，但我找不到方法来做到这一点...

Answer 1

我们做了这样的事情 -

<div class="row">
    <div class="*ngIf="ShowChart" col-sm-4">
      <kendo-chart style="height: 175px;">
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-series>
          <kendo-chart-series-item
              type="donut" [startAngle]="150" [data]="data" 
              categoryField="field" field="value" colorField="color" [visual]="customVisual"
              [size]="30">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
    <div class="legend col-sm-8" [ngClass]="{'col-sm-8': ShowChart, 'col-sm-12': !ShowChart}">
        <table style="width: 100%">
            <tr *ngFor="let legendItem of ChartData.slice(0, 5); last as last;let i = index">
                <td>...</td>
            </tr>
        </table>
     </div>
</div>

这样，我们就可以根据屏幕分辨率显示上面的图表和下面的图例或彼此相邻。

Answer 2

您可以像这样更改图例的位置、可见性或方向

@ViewChild(ChartComponent) chartComponent: ChartComponent;

以后

this.chartComponent.configurationService.store.legend.orientation = 'horizontal';      
this.chartComponent.configurationService.store.legend.position = 'bottom';
this.chartComponent.configurationService.store.legend.visible = false

Kendo Angular 图表根据大小更改图例位置

Kendo Angular Chart change legend position based on size

angular

kendo-ui

kendo-chart