Почему размещение ярлыков 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/

Одна из вещей, которую вы можете сделать, чтобы манипулировать категориальной осью так, как вы хотите, - это u зе мин и макс, как это:

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' для первой диаграммы и «данные» для второго. Измените диаграммы, чтобы они оба использовали один и тот же метод данных, и они должны выглядеть одинаково.