javascript - 为什么两个相似图表中的 Highcharts 刻度位置不同？

Question

我对两个类似的 Highcharts 图表中的刻度位置有疑问。在第一个示例中，我指定了 xAxis 属性，在第二个示例中，我指定了系列中的 x 和 y 值。数据完全相同，但正如您所看到的，刻度的位置不同。我尝试使用 tickmarkPlacement、minPadding、maxPadding 使第一个示例看起来像第二个示例，但没有成功。

有人可以告诉我为什么这两个图表、刻度如此不同，以及如何使第一个示例看起来像第二个示例？

代码和jsFiddles:

第一个示例

代码:

$('#container').highcharts(
    {
        "series": [
            {
                "name": "Series 1",
                "data": [
                    69.78,
                    2235.83,
                    69.78,
                    908.36,
                    69.78,
                    174.78
                ],
                "color": "#0084cb",
                "opposite": false
            }
        ],
        "xAxis": {
            "categories": [
                "2015",
                "2016",
                "2017",
                "2018",
                "2019",
                "2020"
            ],
            "tickmarkPlacement": "on"
        }
    }
);

图表:

http://jsfiddle.net/fw9o4fjh/5/

第二个示例

代码:

$('#container').highcharts(
    {
        "series": [
            {
                "name": "Series 1",
                "data": [
                    {
                        "y": 69.78,
                        "x": 2015
                    },
                    {
                        "y": 2235.83,
                        "x": 2016
                    },
                    {
                        "y": 69.78,
                        "x": 2017
                    },
                    {
                        "y": 908.36,
                        "x": 2018
                    },
                    {
                        "y": 69.78,
                        "x": 2019
                    },
                    {
                        "y": 174.78,
                        "x": 2020
                    }
                ],
                "color": "#0084cb",
                "opposite": false
            }
        ]
    }
);

图表:

http://jsfiddle.net/y71f7hhd/4/

Answer 1

区别在于分类轴类型与线性轴类型。

分类轴类型为每个类别保留均匀的空间 block ，这就是为什么您会在 x 轴的开头和结尾看到“额外”空间。

如果您在图表上启用十字准线，并将鼠标悬停在某个点上，您将看到一个很好的说明，说明它如何处理轴间距:

• 类别:http://jsfiddle.net/jlbriggs/fw9o4fjh/6/

• 线性:http://jsfiddle.net/jlbriggs/y71f7hhd/5/

您可以按照自己的方式操作分类轴的方法之一是使用最小值和最大值，如下所示:

xAxis: {
  min:0.4,
  max:4.6,
  ...

示例:

• http://jsfiddle.net/jlbriggs/fw9o4fjh/8/

这远非精确或理想，但类别的工作方式出于逻辑原因，如果您希望图表像线性示例一样绘制，最好的办法是使用线性轴 - 或者，因为您正在谈论日期，请使用 datetime 轴类型。

无论哪种情况，您都可以使用 pointStart 和 pointInterval 属性来避免发送数据中的 x 值。

示例:

• http://jsfiddle.net/jlbriggs/fw9o4fjh/10/