具有超过 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

添加到wf4answer，下钻部分可以查看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>