為什么在兩個相似的圖表中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

區別在於分類軸類型與線性軸類型。

類別軸類型為每個類別保留一個偶數空間，這就是為什么您在x軸的開始和結束處看到“額外”空間的原因。

如果在圖表上啟用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/

Answer 2

不同的刻度位置是因為第一個圖表使用了“ xAxis”，第二個圖表使用了“ data”。 更改圖表，使它們都使用相同的數據方法，並且外觀應相同。