График столбцов HIghcharts с более чем 50 точками данных

Question

Я использую Highcharts для рендеринга графа столбцов с разверткой со следующими параметрами:

chart: {
  type: 'column',
  inverted: true,
},
xAxis: {
  type: 'category', max: 5,
},
yAxis: {
  title: { text: '' },
  labels: {
    enabled: false
  },
},

Моя серия содержит более 50 точек данных. Когда я пытаюсь прокрутить вниз, он показывает номера индексов вместо меток оси X. Он начинает плохо себя вести, когда число точек данных превышает 50.

Но график 'columnrange' автоматически обрабатывает этот сценарий.

Как я могу увеличить лимит максимально допустимых точек данных?

Демо-код (jsfiddle)

PS: родительская библиотека HighStocks.

Answer 1

Просто измените значение по умолчанию cropThreshold свойство от 50 до значения, равного или превышающего количество точек в серии.

Справочник по API:
http://api.highcharts.com/highcharts/plotOptions.bar.cropThreshold

Пример:
https://jsfiddle.net/5gjb0cxa/

Answer 2

Добавление к ответу wf4, для wf4 вы можете проверить это.

Answer 3

Похоже, что повторяющиеся значения отображаются только один раз. Поскольку вы увеличиваете количество точек данных в серии, именно поэтому вы видите пробелы.

Один из способов заставить диаграмму отображаться так, как вы хотите, выглядит следующим образом: https://jsfiddle.net/wf_4/vynww178/1/

Здесь я удалил текст из каждой точки серии и добавил его в качестве категорий оси Y, по которым будут выровнены данные.

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    marginLeft: 150
  },
  title: {
    text: 'Most popular ideas by April 2016'
  },
  subtitle: {
    text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>'
  },
  xAxis: {
    type: 'category',
    title: {
      text: null
    },
    min: 0,
    max: 4,
    scrollbar: {
      enabled: true
    },
    tickLength: 0,
    categories: ['Gantt chart',
      'Autocalculation and plotting of trend lines',
      'Allow navigator to have multiple data series',
      'Implement dynamic font size',
      'Multiple axis alignment control',
      'Stacked area (spline etc) in irregular datetime series',
      'Adapt chart height to legend height',
      'Export charts in excel sheet',
      'Toggle legend box',
      'Venn Diagram',
      'Add ability to change Rangeselector position',
      'Draggable legend box',
      'Sankey Diagram',
      'Add Navigation bar for Y-Axis in Highstock',
      'Grouped x-axis',
      'ReactJS plugin',
      '3D surface charts',
      'Draw lines over a stock chart',
      'Data module for database tables',
      'Draggable points',
      'Gantt chart',
      'Autocalculation and plotting of trend lines',
      'Allow navigator to have multiple data series',
      'Implement dynamic font size',
      'Multiple axis alignment control',
      'Stacked area (spline etc) in irregular datetime series',
      'Adapt chart height to legend height',
      'Export charts in excel sheet',
      'Toggle legend box',
      'Venn Diagram',
      'Add ability to change Rangeselector position',
      'Draggable legend box',
      'Sankey Diagram',
      'Add Navigation bar for Y-Axis in Highstock',
      'Grouped x-axis',
      'ReactJS plugin',
      '3D surface charts',
      'Draw lines over a stock chart',
      'Data module for database tables',
      'Draggable points',
      'Draggable legend box',
      'Sankey Diagram',
      'Add Navigation bar for Y-Axis in Highstock',
      'Grouped x-axis',
      'ReactJS plugin',
      '3D surface charts',
      'Draw lines over a stock chart',
      'Data module for database tables',
      'Draggable points',
      'Draggable legend box',
      'Sankey Diagram',
      'Add Navigation bar for Y-Axis in Highstock',
      'Grouped x-axis',
      'ReactJS plugin',
      '3D surface charts',
      'Draw lines over a stock chart',
      'Data module for database tables',
      'Draggable points'

    ]
  },
  yAxis: {
    min: 0,
    max: 1200,
    title: {
      text: 'Votes',
      align: 'high'
    }

  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Votes',
    data: [
      1000,
      575,
      523,
      427,
      399,
      309,
      278,
      239,
      235,
      203,
      182,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      1000,
      575,
      523,
      427,
      399,
      309,
      278,
      239,
      235,
      203,
      182,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117,
      157,
      149,
      144,
      143,
      137,
      134,
      118,
      118,
      117
    ]
  }]
});

<div id="container" style="height: 1000px; min-width: 320px; max-width: 600px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>