具有50个以上数据点的HIghcharts列图

Question

我使用Highcharts使用以下选项呈现带有下钻的列图：

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

我的系列包含50多个数据点。当我尝试向下滚动时，它会显示索引号而不是x轴标签。当数据点的数量超过50时，它开始出现异常。

但'columnrange'图表会自动处理这种情况。

如何增加允许的最大数据点数限制？

Demo code (jsfiddle)

PS：父库是HighStocks。

Answer 1

只需将cropThreshold属性的默认值从50更改为等于或高于系列中点数的值。

API参考：
http://api.highcharts.com/highcharts/plotOptions.bar.cropThreshold

例：
https://jsfiddle.net/5gjb0cxa/

Answer 2

添加到wf4 answer，对于下钻部分，您可以查看one。

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>