6

我想删除 y 轴和图表之间的空间，如下所示： 在此处输入图像描述

这是用于创建此图表的小提琴：此图表的 jsFiddle

这是用于设置的代码（与 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
                    }
                }
            });
        });

});
4

3 回答 3

4

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

yAxis: {
    offset: -15
}

演示

偏移量：

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.

参考

于 2013-01-15T13:59:33.280 回答
2

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

        maxPadding:0,
        minPadding:0

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

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

于 2013-06-11T11:26:23.587 回答
1

固定：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
                    }
                }
            });
        });

});
于 2013-01-15T05:31:50.180 回答