2015-07-17 2 views
1

Я пытаюсь добавить Highcharts на свою страницу, но проблема в том, что размер моего DIV-тега довольно мал (233px, 98px), и я хочу показать в нем minorTickInterval, из-за небольшого размера DIV.Highcharts small size div не отображается minorTickInterval

http://jsfiddle.net/a62nhs7f/

Есть в любом случае, чтобы показать внутренние линии интервала в небольшом размере?

var options = { 
     title: { 
      text: '' 
     }, 
     labels: { 
      enabled: false 
     }, 
     title: { 
      text: '', 
      align: 'high', 
      enabled: false 

     }, 
     subtitle: { 
      text: '', 
      align: 'high', 
      enabled: false 
     }, 
     /* 
     xAxis: { 
      tickInterval: 1, 
      breaks: [{ 
       from: 5, 
       to: 10, 
       breakSize: 1 
      }] 
     }, 
     */ 
     legend: { 
      enabled: false 
     }, 
     yAxis: { 
      gridLineWidth:1, 
      lineWidth: 1, 
      min: 0, 
      //tickWidth: 1, 
      minTickInterval:5, 
      minorGridLineWidth:1, 
      minorTickInterval: 0.1, 
      minorTickLength: 2, 
      //type: 'logarithmic', 
      minorTickInterval: 5, 
      //minorTickInterval: 'auto', 
      //minorTickLength: 0, 
      title: { 
       text: '', 
       //align: 'high', 
       enabled: false 
      }, 
      labels: { 
       //enabled: false, 
       style: {"font-size":'8px'}, 
       formatter: function() { 
        return this.value; 
       } 
      } 
     }, 
     xAxis: { 
      min: 0, 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      }, 
      labels: { 
       enabled: false 
      }, 
      /*gridLineColor: '#c9d5ba', 
      gridLineWidth: '1', 
      lineColor: '#222222', 
      lineWidth: 0,*/ 
      categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], 
      labels: { 
       formatter: function() { 
        return '<a style="color:green" data-value="' +[this.value] + '">' + 
         this.value + '</a>'; 
       }, 
       style: {"font-size":'8px'} 
      } 
     }, 
     series: [{ 
      data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//, 
      //pointInterval: 500 
     }] 
    }; 

Благодаря

+0

Lowest minorTickInterval, который будет вписываться в меньшую диаграмму, составляет около 12,777 - меньший интервал не позволит создавать отдельные строки - [скрипка] (http://jsfiddle.net/a62nhs7f/2/). Как бы вы хотели поместить 40 строк (200/5 = 40) в области площади высоты 48 пикселей? –

ответ

0

Вы можете отключить маркеры строк. Думаю, это лучшее решение для вас.

plotOptions: { 
    line: { 
     marker: { 
      enabled: false 
     } 
    } 
}, 

Chek my demo.

+0

В вашей демонстрации маленькая диаграмма не показывает строки, поэтому ее не работает – MZH

Смежные вопросы