highcharts - Highcharts 无法设置响应点宽度

Question

团队！

我已经创建了一个具有向下钻取功能和滚动功能的高图表——如果我自己这么说的话，那就太漂亮了:)。我遇到了最后一个问题，使它成为一个完美的图表，那就是当我在手机/xs 屏幕尺寸上查看它时，柱状条尽可能地“缩进”，以至于它几乎不可读。

我一直在使用 highcharts 上的响应功能，并且我已经设置了 pointpadding 和 grouppadding 以尽可能地扩大条形。我也尝试使用pointWidth，但这只是让条形图相互重叠。

我能想到的唯一其他解决方案是尝试扩大绘图区域，但我找不到这样做的方法——chart.wide 扩大了整个图表，但我希望它保持小于设备的宽度.

有谁知道我可以尝试扩大列吗？这是图表的链接。要查看我在说什么，只需将浏览器的宽度缩小到尽可能小，然后单击第一张图中的任何列。

任何想法将不胜感激！

//Build The Chart
var refChart = new Highcharts.chart('ctReferralsDetail', {
    chart: {
        backgroundColor: 'whiteSmoke',
        type: 'column',
        width: chartWidth,
        events: {
            drilldown: function (e) {
                var dt = $('#tblReferrals').DataTable();
                dt.destroy();

                $('#tblReferrals thead').empty();
                $('#tblReferrals tbody').empty();

                loadTableDetail(e.point.name);

                if (!e.seriesOptions) {
                    for (var i = 0; i < drilldown.length; i++) {
                        if (e.point.name == drilldown[i]) {
                            this.addSingleSeriesAsDrilldown(e.point, pyDet[i]);
                            this.addSingleSeriesAsDrilldown(e.point, cyDet[i]);
                            this.applyDrilldown();

                            var maxVal = (pyDet[i].categories.length - 1) < chartMax ? pyDet[i].categories.length - 1 : chartMax;

                            this.update({
                                xAxis: {
                                    categories: pyDet[i].categories,
                                    max: maxVal,
                                },
                                exporting: {
                                    sourceHeight: 475,
                                    sourceWidth: pyDet[i].categories * 4.5,
                                    chartOptions: {
                                        xAxis: [{
                                            categories: pyDet[i].categories,
                                            labels: {
                                                rotation: 90
                                            },
                                            max: pyDet[i].categories.length - 1,
                                        }]
                                    },

                                }
                            })
                        }
                    }
                }
            },
            drillupall: function () {
                var dt = $('#tblReferrals').DataTable();
                dt.destroy();

                $('#tblReferrals thead').empty();
                $('#tblReferrals tbody').empty();

                loadTableSummary();

                this.update({
                    xAxis: {
                        categories: categoriesAA,
                        max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax
                    },
                    exporting: {
                        sourceHeight: 350,
                        sourceWidth: 500,
                        chartOptions: {
                            xAxis: [{
                                categories: categoriesAA,
                                labels: {
                                    rotation: 0
                                },
                                max: categoriesAA.length - 1,
                            }]
                        },
                    }
                })
            },
        },
    },
    title: {
        text: title
    },
    subtitle: {
        text: subTitle
    },
    xAxis: {
        categories: categoriesAA,
        min: 0,
        max: (categoriesAA.length - 1) < chartMax ? categoriesAA.length - 1 : chartMax,
        scrollbar: {
            enabled: true
        },
    },
    yAxis: [{
        title: {
            useHtml: true,
            text: '<strong># Referrals</strong>'
        }
    }],
    tooltip: {
        shared: true,
    },
    plotOptions: {
        column: {
            borderRadius: 5,
            dataLabels: {
                enabled: true,
                allowOverlap: true,
            },
            groupPadding: 0.15,
            pointPadding: 0.05
        },
    },
    series: [{
        name: dataLabels[0],
        data: pyAA
    }, {
        name: dataLabels[1],
        data: cyAA
    }],
    drilldown: {
        allowPointDrilldown: false,
    },
    exporting: {
        scale: 1,
        sourceHeight: 350,
        sourceWidth: 500,
        chartOptions: {
            xAxis: [{
                categories: categoriesAA,
                labels: {
                    rotation: 0
                },
                max: categoriesAA.length - 1,
            }]
        },
    },
    credits: {
        enabled: false
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 575
            },

            chartOptions: {
                chart: {
                    width: chartWidth + 75,
                },
                plotOptions: {
                    column: {
                        groupPadding: 0,
                        pointPadding: 0,
                    }
                }
            }

        }]
    }
})

标签： highcharts