高图限制了将在yAxis上的类别中显示的项目数量

Question

I have the following chart in Highcharts, I wanted to limit the amount of items that will be displayed on the yAxis, for example 7 items, which always show the first and last items of the variable 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

It can be done in many ways depending on a few things: - what data do you have, - how many ticks do you want to have, - whether you want to display labels between ticks or on ticks, - how do you want to display labels if a number of categories is not divisible by a number of ticks, - whether you want to have equal gaps between ticks etc.

We can play with formatter function, categories, tickAmount property, yAxis.max property and many other things. But in most cases we will have to give up from setting categories ridigly.

One of examples:

I set yAxis.max

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

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

I set tickAmount to 6 and used formatter function

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;
      }
    }
  }
},

And I formatted tooltip:

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

I know that the last tick is not the last element of your category array, but it would be easier to "edit" your data and work on proper data than try to adapt ticks to your strange category array and data that doesn't fit categories.