amcharts Динамически изменять размер контейнера chartdiv (высоту), в зависимости от числа графиков (длины легенды)
Primary tabs
Воспользовавшись идеей из [1] можно написать такую функцию выполняющую перестройку размеров div-а до отрисовки графика:
AmCharts.addInitHandler(function(chart) {
console.log('confif by elements count: ', chart.graphs.length, chart.dataProvider );
var additionalGraphsCount = 0;
if (chart.baseGraphsCount === undefined) {
console.log('Warning! Cant autoresize please set baseGraphsCount parameter');
return;
} else {
additionalGraphsCount = chart.graphs.length - chart.baseGraphsCount;
}
console.log('additionalGraphsCount: ', additionalGraphsCount, ' chart.div.style.height', chart.div.style.height);
// Вычисляем новую высоту
var containerHeight = chart.baseHeight + chart.addPerAdditionalGraph * additionalGraphsCount;
chart.div.style.height = containerHeight + "px";
console.log("New height ", chart.div.style.height);
// chart.div.style.width = containerWidth + "px"; // you can also eir width
}, ['serial']);
-- эта функция использует три нетандартных параметра, которые надо добавить в конфиуграцию нашей области рисования графиков при её создании:
var chart = AmCharts.makeChart( "chartdiv", {
"language": "ru",
"theme": "dark",
"type": "serial",
"baseGraphsCount": 3, // число графиков до автоматического увеличения высоты на сколько пикселей при каждом новом
"addPerAdditionalGraph": 33, // число пикселей добавлевых к высоте chartdiv на каждый новый график в случае, если их счисло больше baseGraphsCount
"baseHeight": 700, // высота в пикселях для baseGraphsCount графиков и меньше
(см. последние три параметра из кода выше).
Источники:
- Dynamically resizing chart container as per number of columns/bars: https://www.amcharts.com/kbase/dynamically-resizing-chart-container-per-number-columnsbars/
- Log in to post comments
- 4212 reads