为什么 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

不同的刻度位置是因为您对第一个图表使用了 'xAxis'，对第二个图表使用了 'data'。更改图表，使它们都使用相同的数据方法，并且看起来应该相同。

Answer 2

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

分类轴类型为每个类别保留一个 space 的偶数块，这就是为什么您在 x 轴的起点和终点看到 'extra' space 的原因。

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

• 类别：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/