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

看起来重复值只被绘制了一次。因为您强制输入了系列中的数据点数，这就是您看到空白的原因。

让图表按您想要的方式显示的一种方法如下：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>

Answer 2

添加到 wf4 , For the drilldown part you can check this 。

Answer 3

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

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

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

具有超过 50 个数据点的 HIghcharts 柱状图

HIghcharts column graph with more than 50 data points

highcharts

highstock

column-chart