Highcharts предотвращает использование ярлыков xAxis

Question

Я использую highcharts для отображения гистограммы. У меня фиксированная вертикальная высота диаграммы, и я хочу, чтобы все ярлыки xAxis отображались. Горизонтальная часть контейнера веб-страниц реагирует на размер окна. Я обнаружил при определенных горизонтальных размерах оболочку легенды, которая, как представляется, скрывает некоторые из моих ярлыков xAxis. Мне не удалось найти какую-либо настройку или комбинацию настроек, которые предотвратят это. Кто-нибудь знает способ сделать это возможным без изменения вертикальной высоты веб-части?

Пример jsFiddle вопроса.

или пример кода ниже,

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="height: 180px; width: 330px; margin: 0 auto"></div> 
<div id="container2" style="height: 180px; width: 500px; margin: 0 auto"></div> 

Javascript

$(function() { 
    var options = { 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: null 
     }, 
     xAxis: { 
      categories: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5'] 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name:'Due > 7', 
      data: [29.9, 71.5, 106.4, 129.2, 144.0] 
     },{ 
      name:'Due < 7', 
      data: [34.9, 72.1, 99.4, 150.4, 169.1] 
     },{ 
      name:'Overdue < 7', 
      data: [29.9, 71.5, 106.4, 129.2, 144.0] 
     },{ 
      name:'Overdue > 7', 
      data: [34.9, 72.1, 99.4, 150.4, 169.1] 
     }] 
    }; 
    $('#container').highcharts(options); 
    $('#container2').highcharts(options); 
}); 

Answer 1

Вы можете перепроектировать небольшой график, некоторые решения:

• использовать легенду на правая сторона: http://jsfiddle.net/Sbm6q/2/
• набор maxHeight для диаграммы (может не работать в вашем случае, когда у вас так мало число серий): http://jsfiddle.net/Sbm6q/3/

Answer 2

Вы можете использовать опцию шаг, и установить его значение к единице. (документация: http://api.highcharts.com/highcharts#xAxis.labels.step)

В моем проекте это разрешено ярлыком xAxis, который был спрятан с помощью высоких диаграмм, потому что скрытые элементы API, которые будут перезаписываться другим, из-за нехватки места. Итак, когда я использовал это, все значения xAxis показаны, но несколько переписывают следующую метку. Итак, мне нужно расширить график.

Но работала, она очень хорошо реагирует прямо сейчас!