Question

我创建了一个column chart，您可以对其进行深入研究。问题在于，当您进行钻取时，会有许多数据列。如何使钻取数据的宽度和整体大小与主图表相同，并使绘图区域可滚动？

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

Answer 1

您可以为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

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

1 个答案: