HighCharts Orgcharts делают контейнер с возможностью прокрутки - PullRequest
Новая
       46

HighCharts Orgcharts делают контейнер с возможностью прокрутки

0 голосов
/ 27 мая 2019

У меня была проблема с диаграммой организации старших чартов. Проблема в том, что график будет большим, и мне нужна горизонтальная полоса прокрутки для контейнера графика, или сделать диаграмму горизонтально прокручиваемой.

Я попытался включить полосу прокрутки диаграммы или сделать прокрутку контейнера диаграммы с помощью css, но не повезло, высокие графики пытаются подогнать диаграмму под размер окна, что в данном случае неприемлемо.

Пробовал включить полосу прокрутки, используя код js ниже 

scrollbar: {
    enabled:true,
    barBackgroundColor: 'gray',
    barBorderRadius: 7,
    barBorderWidth: 0,
    buttonBackgroundColor: 'gray',
    buttonBorderWidth: 0,
    buttonArrowColor: 'yellow',
    buttonBorderRadius: 7,
    rifleColor: 'yellow',
    trackBackgroundColor: 'white',
    trackBorderWidth: 1,
    trackBorderColor: 'silver',
    trackBorderRadius: 7
},

и css, используя стиль для контейнера типа 

<style>
#container {
    min-width: 300px;
    margin: 1em auto;
    border: 1px solid silver;
    overflow: scroll !important;
}

#container h4 {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}
#container p {
    font-size: 13px;
    line-height: 16px;
}
</style>

Результаты можно просмотреть в скрипте, указанной ниже

https://jsfiddle.net/72v36msx/

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

Любая помощь будет оценена!

1 Ответ

0 голосов
/ 27 мая 2019

Функция scrollbar доступна только для Highstock. Чтобы создать пользовательскую полосу прокрутки, установите для chart.width более высокое значение, чем ширина контейнера.

CSS: 

#container {
    min-width: 300px;
    overflow: scroll !important;
}

JS: 

chart: {
    width: 1200,
    ...
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/5hpk3e9d/

Справочник по API: https://api.highcharts.com/highcharts/chart.width

...