На моей веб-странице я показываю диаграммы zing в разных контейнерах. Я динамически устанавливаю высоту и ширину контейнеров. Ширина контейнера будет равна 48% или 96% относительно ширины страницы, в то время как высота поступает из бэкэнд (настраивается пользователем).Как сделать zingchart полностью отзывчивым внутри контейнера без прокрутки?
Внутри контейнера я показываю заголовок и хлебную крошку, которая занимает некоторое количество высоты контейнера (около 50 пикселей). Мне нужно использовать остальную часть области для построения диаграммы zing.
Так что я попробовал два метода:
Настройка высоты и ширины в 100% при визуализации Zing диаграммы. В этом случае мне нужно установить прокрутку для контейнера или диаграммы zing, чтобы сделать мою диаграмму надлежащей. Scroll не должен присутствовать. Поэтому мне пришлось отказаться от этого.
Другой метод, который я пытался, вычитал высоту контейнера с 50px (как указано выше во втором абзаце второй строки, это пространство, взятое заголовком и палитрой) и установить эту высоту для диаграммы при рендеринге. Похоже, что это происходит в некоторых сценариях, поскольку диаграмма кажется слишком маленькой. Я разделяю фрагмент кода и сценарий, в котором он терпит неудачу.
Это конфигурация, которую я использую для установки вертикальной диаграммы.
var vBarConfig = {
"type": "vbar"
, "legend": {
toggleAction: 'none'
, "marker": {
"cursor": "hand"
}
, "item": {
"cursor": "hand"
}
, "border-color": "none"
, "align": "center"
, "vertical-align": "bottom"
, "max-items": 4
, "overflow": "page"
, "page-on": {
"background-color": "black"
, "border-width": 1
, "border-color": "black"
}
, "page-off": {
"background-color": "#ffe6e6"
, "border-width": 1
, "border-color": "black"
}
, "page-status": {
"font-color": "black"
, "font-size": 11
, "font-family": "Georgia"
, "background-color": "#ffe6e6"
, }
}
, "plotarea": {
"margin-bottom": "35%"
, "margin-top": "15%"
, "border-top": "1px solid grey"
, "border-right": "1px solid grey"
}
, "scale-x": {
"labels": categoryVbarName
, "auto-fit": true
, "line-width": 1
, "items-overlap": true
, "item": {
"angle": 0
, "wrap-text": true
}
}
, "scale-y": {
"values": scaleValue
, "ref-value": refMarkerPosition
, "ref-line": {
"visible": true
, "line-color": refMarkerColor
, "line-width": refMarkerWidth
, "line-style": "solid"
, "items-overlap": true
}
, "guide": {
"line-style": "solid"
}
}
, "plot": {
"tooltip": {
"rules": $scope.tooltipVbarRules
}
, "value-box": {
"text": "%vt "
, "visible": true
, "font-color": "black"
, "font-size": "10px"
, "decimals": 2
, "angle": -90
, "placement": "middle"
}
, "animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
, "speed": "2000"
}
}
, "series": vbarData
}
/* Getting the height of the container */
var height=$('#'+contentName+'TH').height();
height=height-50;
zingchart.render({
id: contentName
, data: vBarConfig
, height:height
, width: '100%'
, defaults: commonSettings
});
Есть ли другой способ, который я мог бы сделать динамикой zing динамической в моем контейнерном сценарии? или я делаю что-то неправильно? Пример сценария: Я устанавливаю высоту для контейнера перед вызовом функции рендеринга. Как я уже сказал, я уже использую 100% ширину и 100% высоту. Контейнер, в котором будет формироваться диаграмма, имеет ширину и высоту в 48% «300 пикселей». Название для диаграммы и палочки берет «50 пикселей» высоты контейнера. Теперь мы остаемся с «250px» высоты, чтобы построить график. Когда мы устанавливаем значение рендеринга высоты как «100%» для диаграммы, оно берет «100%» от «300 пикселей». Этого не должно произойти, потому что оно создаст прокрутку для контейнера. Я хочу, чтобы диаграмма была построена в пространстве 250 пикселей. (Нет прокрутки)
может у пожалуйста, проверьте вопрос, в конце концов. Я привел примерный сценарий. Невозможно ввести его здесь, потому что он слишком длинный. – user5210703
Итак, у вас есть что-то вроде '