Можно ли иметь горизонтальную прокрутку в таблицах AnyChart?

0 Elvis [2018-04-18 17:50:00]

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

scroll anychart


2 ответа


0 AnyChart Support [2018-04-19 13:18:00]

Это можно сделать только с помощью CSS. Ниже вы можете найти способ включения прокрутки для таблицы AnyChart с помощью CSS.

anychart.onDocumentReady(function () {

        var stage = null;

        //array for common padding settings
        var padding = [0, 10, 0, 10];

        //initial create table
        createTable();
        
                        //create table with headers
        stageHeaders = anychart.graphics.create("headers");
				//create standalone table
				tableHeaders = anychart.standalones.table();
				var headers = [];
				headers.push(['Static header', 'static header']);
        tableHeaders.contents(headers);
        tableHeaders.getCol(0).width(100);
        tableHeaders.container(stageHeaders).draw();
        
                stageBottom = anychart.graphics.create("bottom");
				//create standalone table
				tableBot = anychart.standalones.table();
                    				var axes = [];
				axes.push(['Static bottom', 'Static bottom']);
        tableBot.contents(axes);
        tableBot.getCol(0).width(100);
        tableBot.container(stageBottom).draw();
       
        //create table
        function createTable() {
            if (stage !== null) {
                stage.dispose();
            }

            stage = anychart.graphics.create("container");

            //create standalone table
            table = anychart.standalones.table();

            var tableContent = [];
            tableContent.push(['Content', 'Content']);

            for (var j = 0; j<20; j++) {
                    tableContent.push(['Content', 'Content']);
            }

            tableContent.push(['THE END', null]);

            table.contents(tableContent);

                //adjust table appearance
                table.getRow(0).height(45);

                for (var k=0; k<table.rowsCount(); k++) {
                    table.getRow(k).height(45);
                }

                table.getCol(0).width(100);
                table.getCol(0).border().left('white');
                table.getCol(0).border().top('white');
                table.getCol(0).border().bottom('white');
                table.getCol(1).border().right('white');
                table.getCol(1).border().top('white');
                table.getCol(1).border().bottom('white');
                table.getCol(1).cellPadding(padding);
                table.vAlign('middle');

            //render the table
            table.container(stage).draw();
						stage.height(1000);
        }
    });
html, body {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #container {
            position: relative;
            width: 95%;
            height: 65%;
            margin: 0;
            padding: 0;
            overflow-y: scroll;
        }
                #headers {
            position: relative;
            width: 95%;
            height: 10%;
            margin: 0;
            padding: 0;
        }
                        #bottom {
            position: relative;
            width: 95%;
            height: 10%;
            margin: 0;
            padding: 0;
        }
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-bullet.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-table.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css"/>
    
<div id="headers"></div>
<div id="container"></div>
<div id="bottom"></div>

0 eddiemonster [2018-04-18 17:54:00]

Взгляните на метод ориентации(). Вы можете переместить полосу прокрутки, используя ее.

// change the scroller orientation
chart.xScroller().orientation("top");
chart.yScroller().orientation("left");

Для настройки высоты (ширины) прокрутки используйте метод height(). Существуют также методы maxHeight() и minHeight(), которые полезны при изменении размеров ваших диаграмм.

// set the bar height
chart.xScroller().maxHeight(35);