Развертка Highcharts Как сохранить Drilldown того же размера - PullRequest
Новая
       0

Развертка Highcharts Как сохранить Drilldown того же размера

0 голосов
/ 30 октября 2018

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

Как вы можете видеть, я пытался сделать div, содержащий диаграмму, максимальной ширины, надеясь, что это вызовет переполнение ... но не такая удача. 

<body>
    <div class="container-fluid">
        <div class="row">
            <div id="ctReferrals" style="max-width: 500px; overflow-x: auto"></div>
        </div>
    </div>
    </form>
</body>


function loadChart() {
    refChart = new Highcharts.chart('ctReferrals', {
        chart: {
            type: 'column',
            backgroundColor: 'whiteSmoke',
        },
        title: {
            text: 'Total # of Referrals by School Level'
        },
        subtitle: {
            text: 'By Year'
        },
        xAxis: {
            categories: categoriesSL,
        },
        yAxis: [{
            title: {
                useHtml: true,
                text: '<strong># Referrals</strong>'
            }
        }],
        plotOptions: {
            column: {
                borderRadius: 5,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                },
                point: {
                    events: {
                        click: function () {
                            var schoolLevel = this.schoolLevel;
                            var schoolID_alt = this.schoolID_alt;

                            if (schoolID_alt == 0) { // drill down
                                if (schoolLevel == "01") 
                                    setChart(categoriesElem, [pyElem, cyElem]);
                                else if (schoolLevel == "02")
                                    setChart(categoriesMid, [pyMid, cyMid]);
                                else if (schoolLevel == "03")
                                    setChart(categoriesHigh, [pyHigh, cyHigh]);
                            } else { // restore
                                setChart(categoriesSL, [pySL, cySL]);
                            }
                        }
                    }
                },
            }
        },
        series: [{
            name: dataLabels[0],
            data: pySL
        }, {
            name: dataLabels[1],
            data: cySL
        }],
        credits: {
            enabled: false
        }
    })
}

1 Ответ

0 голосов
/ 31 октября 2018

Вы можете установить свойства min и max для xAxis и переключать полосу прокрутки с Highstock для событий детализации: 

chart: {
    events: {
        drilldown: function() {
            this.update({
                scrollbar: {
                    enabled: true
                }
            }, false);
        },
        drillupall: function() {
            this.update({
                scrollbar: {
                    enabled: false
                }
            }, false);
        }
    }
},
xAxis: {
    min: 0,
    max: 2
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/xtg5Lu20/

API: https://api.highcharts.com/highcharts/chart.events

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...