1

我正在使用 Highcharts 使用以下选项呈现带有向下钻取的柱形图：

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

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

但是“列范围”图确实会自动处理这种情况。

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

演示代码（jsfiddle）

PS：父库是HighStocks。

4

3 回答 3

3

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

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

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

于 2017-10-12T16:29:46.870 回答
1

添加到wf4 答案，对于向下钻取部分，您可以检查这个。

于 2017-10-12T12:17:51.710 回答
0

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

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

于 2017-10-12T08:30:14.740 回答