Как добавить вертикальную и горизонтальную полосы прокрутки в диаграмму кендо

Я использую диаграммы кендо, я хочу, чтобы категория по оси Y и дата по оси X были статичными, и мне нужна полоса прокрутки для диаграммы вместо того, чтобы использовать div, а также хочу, чтобы размер полосы был маленьким, а размер шрифта должен быть меньше, чем в пример.

Пример стекблиц

angular angular6 kendo-grid kendo-chart

08.04.2019 11:20

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

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

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

1 682

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы это произошло, пришлось

добавьте раздел стиля в определение вашего компонента
удален встроенный стиль из div

app.component.ts изменяется ниже:

@Component({
    selector: 'my-app',
    template: `
        <div >
          <kendo-chart style = "width: 3832px" [valueAxis] = "valueAxis" [ngStyle] = "{ 'height.px': chartHeight }">
            <kendo-chart-plot-area background = "#F2F2F2"></kendo-chart-plot-area>
            <kendo-chart-series>
                <kendo-chart-series-item *ngFor = "let series of model"
                type = "rangeBar" [spacing] = "-1" [data] = "series.data" [opacity] = "0.8" fromField = "Start" toField = "End" categoryField = "Category">
                </kendo-chart-series-item>
            </kendo-chart-series>         
          </kendo-chart>
        </div>
    `,
    styles:[` 
      kendo-chart{ max-width: 525px; max-height: 300px;}
      ::ng-deep g>text{ font-size: 11px !important;}
    `]
})

завершить рабочая демонстрация здесь

Спасибо за ответ, как я могу добавить к нему вертикальную полосу прокрутки, сохранив фиксированную высоту диаграммы.

— 15.04.2019 11:05

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

— 15.04.2019 13:42

диаграмма является одним из компонентов на странице и не занимает всю страницу, поэтому мне нужна фиксированная высота диаграммы с помощью полосы прокрутки.

— 15.04.2019 13:54

полоса прокрутки требуется на странице или графике... как это? stackblitz.com/edit/angular-zsvks7-xepyp6?file=app/…

— 15.04.2019 13:58

мне нужна полоса прокрутки для диаграммы, а не для страницы, даже если нет другого содержимого, диаграмма должна иметь прокрутку. Полоса прокрутки страниц — это функция браузера по умолчанию.

— 15.04.2019 14:47

о, хорошо... проверь сейчас: stackblitz.com/edit/angular-zsvks7-xepyp6?file=app/…

— 15.04.2019 14:56

действительно спасибо за вашу быструю помощь, еще один вопрос, можем ли мы иметь даты вне полосы прокрутки (полоса прокрутки должна применяться только к полосам)

— 15.04.2019 15:01

свойства overflow и height не работают в <path>... поэтому, если нет способа сделать это в документации Kendo Charts, это не произойдет через css

— 15.04.2019 15:09

Хорошо, спасибо.

— 15.04.2019 15:29

09.04.2019 10:16