AnyChart表上可以有一个水平滚动条吗？

Question

我遇到了一个问题，这个表中有太多数据列，我希望它继续在图形上，用户可以选择水平滚动。这可能吗？

Answer 1

看看orientation（）方法。您可以使用它重新定位滚动条。

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

要调整滚动条高度（宽度），请使用height（）方法。还有maxHeight（）和minHeight（）方法，这些方法在调整图表大小时非常有用。

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

Answer 2

这只能通过CSS完成。您可以在下面找到如何使用CSS为AnyChart表启用滚动的方法。

＆＃13;

＆＃13;

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);
        }
    });

＆＃13;

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;
        }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;