Highcharts 直方图向下钻取：设置向下钻取选项 + 第一列和最后一列截止值

Question

我有一个游戏有 3 个难度，我在第一张图表中显示了它们的平均值。现在我想使用向下钻取在直方图中显示每个难度的分数分布。我设法让这个工作，但我有两个问题。首先，我使用更新来更改向下钻取图的设置，但随后这些设置也会针对第一个图发生更改，因此我想知道执行此操作的更好方法是什么。我的另一个问题是，在我的直方图中，第一列和最后一列被切成两半，只显示了一半，但我似乎找不到解决这个问题的方法。我尝试了 min- 和 maxPadding 但这没有用。

chart of the tree difficulties Histogram of one difficulty

https://jsfiddle.net/vlovlo/sng4jwv8/36/ 这是我的代码

Highcharts.chart('skippedPatients', {
    chart: {
        events: {
            drilldown: function (e) {
                this.update({
                    title: {text: "Skipped patient: " + e.point.name},
                    xAxis:{
                        title:{text: "Nr of skipped patients"},
                        tickmarkPlacement: 'on',
                    },
                    yAxis:{title:{text: "Nr of players"}},
                    plotOptions:{series:{pointPlacement: 'on'}},

                });

                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'Histogram: Easy': {
                                name: 'Easy',
                                type: 'histogram',
                                baseSeries: 'avgSkippedEasy'
                            },
                                'Easy': {
                                id: 'avgSkippedEasy',
                                visible: false,
                                type: 'column',
                                data: skippedPatientsList
                            }
                        },
                        series = [drilldowns['Histogram: ' + e.point.name], drilldowns[e.point.name]];

                    chart.addSingleSeriesAsDrilldown(e.point, series[0]);
                    chart.addSingleSeriesAsDrilldown(e.point, series[1]);
                    chart.applyDrilldown();
                }

            }
        }
    },
    title: {
        text: 'Skipped patients'
    },
    xAxis: {
        type: 'category',       
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            },
        },
        histogram: {
            binWidth: 1
        }
    },

    series: [{
        name: 'Averages per difficulty',
        colorByPoint: true,
        type: 'column',
        data: [{
            name: 'Easy',
            y: 5,
            drilldown: true
        }, {
            name: 'Moderate',
            y: 2,
            drilldown: true
        }, {
            name: 'Hard',
            y: 4,
            drilldown: true
        }]
    }],

    drilldown: {
        series: []
    }
});

Answer 1

您应该将您的初始选项定义为一个变量，并在 drillup 回调中再次附加它们，因为您进行了图表更新并更改了初始选项。

演示：https://jsfiddle.net/BlackLabel/5d1atnh7/

Highcharts 直方图向下钻取：设置向下钻取选项 + 第一列和最后一列截止值

Highcharts histogram drilldown: set options for drilldown + first and last column cut-off

histogram

highcharts

drilldown