使高图列扩展到边缘

Question

我无法解决如何将我的列高图扩展到最佳状态。

在下图中，蓝色区域是highcharts div，红色区域是我想要消除的“浪费空间”。

这样做的最佳方式是什么？

编辑：这是我在咖啡脚本中的（简化）配置和一个更好地解释问题的gif

     graphEl.highcharts
                    chart:
                        animation:false
                        margin: [0,0,0,0]
                        spacing: [0,0,0,0]
                        zoomType: false
                    credits:false
                    navigation:
                        buttonOptions:
                            enabled: false
                    pane:
                        size: "100%"
                    plotOptions:
                        spline:
                            marker:
                                radius: 0
                        line:
                            border:1
                            marker:
                                radius: 0
                        column:
                            grouping:false
                            pointPadding: 0
                            pointPlacement: "on"
                            groupPadding: 0
                            padding:0
                            borderWidth: 0
                            borderColor: "transparent"

                    title:
                        text: ""

                    subtitle:
                        text: ""

                    xAxis:
                        startOnTick: true
                        endOnTick: true
                        lineColor: "#F3F3F3"
                        tickColor: "#F3F3F3"
                        labels:
                            enabled:false
                            step:1
                    yAxis: [ # Primary yAxis
                        type: 'column'
                        min:0
                        gridLineWidth: 0
                        minorGridLineWidth: 0
                        lineColor: "#3782C1"
                        labels:
                            format: ""
                            style:
                                display: "none"
                        title:
                            text: ""
                            style:
                                display: "none"
                    ]
                    dataLabel:
                        useHTML:true
                    legend:
                        padding: 0
                        floating: true
                        style:
                            display: "none"
                    series: seriesList

Answer 1

你可以实现我的管理组填充和点填充。

通过将它们都设置为0，您可以摆脱额外的间距，但这也会导致内部列之间的空间减少。所以建议你使用tickmarkPlacement选项。

xAxis : {
    tickmarkPlacement : 'on'
}

实施例

tickmarkPlacement：http://jsfiddle.net/oj3odzkf/

管理groupPadding：http://jsfiddle.net/oj3odzkf/1/

希望这会对你有所帮助