Highcharts Bar Chart Zoom не работает

Question

Если вы используете гистограмму в Highcharts, зум не работает должным образом. Вы можете выбрать область, а также кнопку «Сбросить масштаб». На графике, однако, не увеличено

только код, который я добавил к основному примеру бара был тип масштабирования:.

chart: { 
    type: 'bar', 
    zoomType: 'x' 
}, 

Полный пример: http://jsfiddle.net/966off9e/

Является ли это ошибка или особенность? ;-)

Answer 1

Я думаю, что это как-то ошибка в Highcharts, когда вы используете ось categorized. Но обходной путь будет с помощью min для этой оси:

xAxis: { 
     categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
     title: { 
      text: null 
     }, 
     min: 0 
} 

Вот DEMO

Answer 2

Другая возможность состоит в том, что объем данных больше, чем переменная cropThreshold. См. this related post.

Для этой переменной вы также можете найти official docs. Каждый вид графики имеет эту переменную с разными значениями по умолчанию. Вы должны проверить это, чтобы быть уверенным.

Answer 3

Просто добавьте 'minRange' в XAxis: http://jsfiddle.net/mushigh/axy8v9oa/

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar', 
      zoomType: 'x' 
     }, 
     title: { 
      text: 'Historic World Population by Region' 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org' 
     }, 
     xAxis: { 
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
      title: { 
       text: null 
      }, 
      minRange: 1, 
     }, 
     yAxis: { 
      title: { 
       text: 'Population (millions)', 
       align: 'high' 
      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: { 
      valueSuffix: ' millions' 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -40, 
      y: 100, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Year 1800', 
      data: [107, 31, 635, 203, 2] 
     }, { 
      name: 'Year 1900', 
      data: [133, 156, 947, 408, 6] 
     }, { 
      name: 'Year 2008', 
      data: [973, 914, 4054, 732, 34] 
     }] 
    }); 
});