Kendo Angular Chart меняет положение легенды в зависимости от размера

Я использую компонент диаграммы Кендо для Angular. На полноразмерном экране я хотел бы, чтобы компонент легенды располагался справа от основной диаграммы, но на маленьких экранах и мобильных устройствах он становится немного тесноватым, поэтому для большей отзывчивости я хотел бы переместить его в нижнюю часть диаграммы для маленьких экранов. .

Проблема в том, что позиция - это отдельный атрибут в теге легенды, а не стиль, поэтому, насколько я могу судить, я не могу выполнить медиа-запрос, чтобы изменить его ...

Я погуглил и нашел много того, как расположить легенду, но не делать это динамически в зависимости от размера. Есть ли способ сделать это, что мне не хватает? Я все еще наполовину новичок в адаптивном html / css, поэтому вполне возможно, что мне не хватает чего-то простого, но я не могу найти способ сделать это ...


angular kendo-ui kendo-chart
person sfaust    schedule 23.11.2019    source источник
comment
У нас была аналогичная проблема, и мы отключили легенды на диаграмме и создали собственный контейнер легенд. Таким образом, у нас была диаграмма в одном блоке, а легенды - в другом, и мы использовали бутстрап, чтобы сделать их адаптивными.   -  person buchipper    schedule 24.11.2019
comment
Значит, тогда тег легенды был вне тега диаграммы? Думаю, я предположил, что это должно быть внутри него ...   -  person sfaust    schedule 24.11.2019

Ответы (2)


arrow_upward
1
arrow_downward

Мы сделали что-то вроде этого -

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

Таким образом, мы смогли показать диаграмму выше и легенды ниже или рядом друг с другом в зависимости от разрешения экрана.

person buchipper    schedule 24.11.2019
comment
Понятно, так что вы, по сути, убиваете встроенную легенду и создаете свою собственную. Я поиграюсь с этим, спасибо! - person sfaust; 25.11.2019
comment
Ага. Вот что мы сделали. - person buchipper; 26.11.2019

arrow_upward
0
arrow_downward

Вы можете изменить положение, видимость или ориентацию ваших легенд следующим образом

@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
person SlowMagic    schedule 27.02.2020
comment
Спасибо за ответ. Из вашего ответа неясно, как это решает проблему OP, не могли бы вы прояснить и расширить ее? - person bracco23; 27.02.2020