Высокие графики ограничивают количество элементов, которые будут отображаться в категориях на YAXIS

Question

У меня есть следующий график в Highcharts, я хотел ограничить количество элементов, которые будут отображаться на yAxis, например, 7 элементов, которые всегда показывают первый и последний элементы переменной categories.

$(function () {

var categories = ["Pos 01", "Pos 02", "Pos 03", "Pos 04", "Pos 05", "Pos 06", "Pos 07", "Pos 08", "Pos 09", "Pos 10", "Pos 11", "Pos 12", "Pos 13", "Pos 14", "Pos 15", "Pos 16", "Pos 17"];

var plan = [{x: 1534095420000, y:15},{x:1534097580000, y:14},{x:1534099020000,y:13},{x:1534119900000,y:12},{x:1534149780000,y:11},{x:1534174620000,y:10},{x:1534176420000,y:9},{x:1534189020000,y:8},{x:1534313940000,y:7},{x:1534317900000,y:6},{x:1534337700000,y:5},{x:1534373880000,y:4},{x:1534374120000,y:3},{x:1534375560000,y:2},
{x:1534377720000,y:1},{x:1534378200000,y:0},{x:1534378200000,y:0},{x:1534414200000,y:0},{x:1534414620000,y:1}];

var series =[{
                name: "Plan",
                id: "plan",
                data: plan
            }];
            
          
  // Create the chart
  window.chart = new Highcharts.Chart('container',{
                colors: ["#7cb5ec"],
                chart: {
                    type: "spline",
                },
                exporting: {
                    enabled: false
                },
                title: {
                    text: 'Graphic'
                },
                yAxis: {
                    categories: categories,
                    title: {
                        text: 'Position'
                    },
                    labels: {
                        format: '{value}'
                    },
                },
                xAxis: {
                    title: {
                        text: 'Date'
                    },
                    type: 'datetime',
                    tickInterval: 3600000,
                },
                plotOptions: {
                    spline: {
                        findNearestPointBy: 'xy',
                        marker: {
                            enabled: true
                        }
                    }
                },
                tooltip: {
                    split: false,
                    useHTML: true,
                    style: {
                        pointerEvents: 'all'
                    },
                    formatter: function () {
                        return this.series.yAxis.categories[this.point.y];
                    }
                },
                "series": series
            });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 600px; min-width: 500px"></div>

Answer 1

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

Мы можем поиграть с функцией форматирования, категориями, свойством tickAmount, yAxis.макс недвижимость и многое другое.Но в большинстве случаев нам придется смиренно отказаться от установки категорий.

Один из примеров:

Я устанавливаю yAxis.max

chart: {
  type: "spline",
  events: {
    load: function() {
      var chart = this,
        max = chart.series[0].dataMax;

      chart.update({
        yAxis: {
            max: max
        }
      });
    }
  }
},

Я устанавливаю tickAmount равным 6и используется функция форматирования

yAxis: {
  //categories: categories,
  title: {
    text: 'Position'
  },
  tickAmount: 6,
  labels: {
    formatter: function() {
        var value = this.value + 1;
                if (this.value < 9) {
        return 'Pos 0' + value;
      } else {
        return 'Pos ' + value;
      }
    }
  }
},

И я отформатировал всплывающую подсказку:

tooltip: {
  split: false,
  useHTML: true,
  style: {
    pointerEvents: 'all'
  },
  formatter: function() {
    var y = this.y + 1;
    if (y < 10) {
      return 'Pos 0' + y;
    } else {
      return 'Pos ' + y;
    }
  }
},

js Fiddle

Я знаю, что последний тик непоследний элемент вашего массива категорий, но было бы легче «редактировать» ваши данные и работать с правильными данными, чем пытаться адаптировать тики к вашему странному массиву категорий и данным, которые не соответствуют категориям.