Highcharts - BubbleChart - добавление отступы в верхней и нижней части участка

Question

Я создал пузырьковую диаграмму в Highcharts следующим образом:

jsFiddle

Как вы можете видеть, что «пузыри» для данных «0» и данных «7» отрезаны.

Можно ли добавить прописку сверху и снизу, чтобы принять это во внимание?

Я знаю, расширяя диапазон оси -1 -> 8 будет разобраться в этом, но я скорее бы не сделать это таким образом

Вот код:

$(function() { 

    var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' }, 
       { x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' }, 
       { x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' }, 
       { x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' }, 
       { x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' }, 
       { x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' }, 
       { x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' }, 
       { x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];   

    $('#container').highcharts({ 

     chart: { 
      type: 'bubble', 
      plotBorderWidth: 1, 
      zoomType: 'xy' 
     }, 
      credits: false, 

     legend: { 
      enabled: false 
     }, 

     title: { 
      text: '' 
     }, 

     xAxis: { 
      gridLineWidth: 1, 
      title: { 
       text: '' 
      }, 
      categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8'] 
     }, 

     yAxis: { 
      startOnTick: true, 
      min: 0, 
      max: 7, 
      title: { 
       text: 'Score' 
      }, 
      labels: { 
       format: '{value}' 
      }, 
      maxPadding: 0.2 
     }, 

     tooltip: { 
      useHTML: true, 
      headerFormat: '<table>', 
      pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' + 
       '<tr><th>Score:</th><td>{point.y}</td></tr>' + 
       '<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>', 
      footerFormat: '</table>', 
      followPointer: true 
     }, 

     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        format: '{point.name}' 
       } 
      } 
     }, 
     series: [{ data: data }] 
    }); 
}); 

Answer 1

я наткнулся ответ на этот вопрос в поиске Google: http://www.java2s.com/Tutorials/highcharts/Example/Axis_Label/Hide_axis_first_label.htm.

пример

Этот код показывает атрибуты, называемые showFirstLabel и showLastLabel, которые можно использовать либо в xAxis или yAxis. Они должны выполнить то, что вы хотите, добавив дополнительное пространство для пузырьков, увеличив диапазон yAxis (до -1 до 8), но не показывая эти дополнительные ярлыки, как вы просили в своем вопросе.

Вот где я применил их в параметрах диаграммы ...

yAxis: { 
     startOnTick: true, 
     min: -1, 
     max: 8, 
     showFirstLabel: false, 
     showLastLabel: false, 
     title: { 
      text: 'Score' 
     }, 
     labels: { 
      format: '{value}' 
     }, 
     maxPadding: 0.2 
    }, 

... и вот результат:

Вы можете просмотреть обновленную версию вашего скрипка здесь: http://jsfiddle.net/brightmatrix/svcuLgso/7/

Надеюсь, это поможет!

Answer 2

два альтернативных способа справиться с этим:

1) Набор startOnTick и endOnTick в false. При необходимости отрегулируйте minPadding/maxPadding.

yAxis: { 
    startOnTick: false, 
    endOnTick: false, 
    minPadding: 0.025, 
    maxPadding: 0.025 
} 

Выход:

Fiddle:

• http://jsfiddle.net/jlbriggs/svcuLgso/8/

2) Только не устанавливайте min или max, и пусть график делает то, что он делает.

yAxis: { } 

Fiddle:

• http://jsfiddle.net/jlbriggs/svcuLgso/9/