删除Axis与highcharts中的数据之间的空间

Question

我想删除y轴和图表之间的空格，如下所示：

以下是用于创建此图表的小提琴：jsFiddle for this chart

以下是用于设置的代码（与jsFiddle相同）：

$(function () {
   var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    spacingLeft: 2,
                    spacingRight: 2
                },
                credits: { enabled: false },
                title: { text: '' },
                yAxis: {
                    title: '',
                    labels: {
                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                xAxis: { labels: { enabled: false } }, //hide the x axis labels 

                series: [{
                    type: 'area',
                    name: 'speed',
                    showInLegend: false,
                    data: [
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        54.4]
                }],
                /* To make it pretty */
                plotOptions: {
                    area: {
                        animation: false,
                        lineWidth: 1,
                        marker: {
                            enabled: false,
                            states: {
                                hover: {
                                    enabled: true,
                                    radius: 5
                                }
                            }
                        },
                        shadow: false,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                }
            });
        });

});

Answer 1

正确的方法是将offset设置为-15。

yAxis: {
    offset: -15
}

demo

<强>偏移：

The distance in pixels from the plot area to the axis line. A positive offset moves the axis with it's line, labels and ticks away from the plot area. This is typically used when two or more axes are displayed on the same side of the plot. Defaults to 0.

reference

Answer 2

考虑使用xAxis对象使用以下内容：

        maxPadding:0,
        minPadding:0

还要确保您的标签封闭不包含“步骤”

min和max也是一种方便的绑定方式

Answer 3

修正：http://jsfiddle.net/basarat/pfkbX/1/

基本上需要添加yAxis.align ='left'。同时将标签向上移动一点（因此它们在线上而不是在线下通过设置y = 2属性）并且还使用x = 0属性将它们聚焦：

$(function () {
   var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    spacingLeft: 2,
                    spacingRight: 2
                },
                credits: { enabled: false },
                title: { text: '' },
                yAxis: {
                    title: '',
                    labels: {
                        style: {
                            fontSize:'9px'
                        },
                      y:-2,
                      x:0,
                      align:'left'
                    }
                },
                xAxis: { labels: { enabled: false } }, //hide the x axis labels 

                series: [{
                    type: 'area',
                    name: 'speed',
                    showInLegend: false,
                    data: [
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        54.4]
                }],
                /* To make it pretty */
                plotOptions: {
                    area: {
                        animation: false,
                        lineWidth: 1,
                        marker: {
                            enabled: false,
                            states: {
                                hover: {
                                    enabled: true,
                                    radius: 5
                                }
                            }
                        },
                        shadow: false,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                }
            });
        });

});