Question

我正在为Kenular使用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 Chart根据尺寸更改图例位置

2 个答案: