Highcharts

Question

我创建了一个highcharts气泡图如下：

如果可能的话，我希望 a 轴网格线位于气泡的中间。

有办法实现吗？

代码如下：

$(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

您可以使用 tickmarkPlacement option:

xAxis: {
    tickmarkPlacement: 'on'
}

For categorized axes only. If on the tick mark is placed in the center of the category, if between the tick mark is placed between categories. The default is between if the tickInterval is 1, else on. Defaults to null.

有关示例，请参阅 this updates JSFiddle。

Highcharts - 气泡图 - 移动网格线

Highcharts - Bubble chart - Moving gridlines

javascript

bubble-chart

data-visualization