Kendo Angular Chart根據大小更改圖例位置

Question

我正在為 Angular 使用 Kendo 圖表組件。 在全尺寸屏幕上，我希望圖例組件位於主圖表的右側，但在小屏幕和移動設備上，它會變得有點局促，因此為了提高響應速度，我希望將其移動到小屏幕圖表的底部.

問題是位置是圖例標簽上的一個單獨屬性，而不是樣式，據我所知我無法進行媒體查詢來更改它...

我在谷歌上搜索並找到了很多關於如何定位圖例的信息，但不是根據大小動態地這樣做。 有沒有辦法做到這一點，我失蹤了？ 我對響應式 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