时间戳

首页 > 解决方案 > Highcharts 向下钻取 如何保持向下钻取大小相同

highcharts - Highcharts 向下钻取 如何保持向下钻取大小相同

问题描述

我创建了一个柱形图，您可以深入了解。问题是钻取时有很多列数据。如何保持钻取数据的宽度和整体大小与主图表相同，并使绘图区域可滚动？

如您所见，我尝试将包含图表的 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
        }
    })
}

标签： highcharts

解决方案

您可以在钻取事件上为 Highstock 设置和切换滚动条的min属性max：xAxis

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

推荐阅读