Highcharts - Bubblechart - добавление отступов вверху и внизу графика

Я создал пузырьковую диаграмму в 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 }]
    });
});

javascript data-visualization highcharts bubble-chart
person Pat Dobson    schedule 16.05.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я нашел ответ на этот вопрос в поиске 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/

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

person Mike Zavarello    schedule 16.05.2016
comment
Гениально - спасибо :) - person Pat Dobson; 16.05.2016

arrow_upward
1
arrow_downward

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

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

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

Вывод:

скриншот1

Скрипка:

2) Просто не устанавливайте min или max и позвольте диаграмме делать то, что она делает.

    yAxis: { }

Скрипка:

person jlbriggs    schedule 16.05.2016