javascript - Highcharts - 气泡图 - 比例气泡

Question

我正在根据用户选择的数据制作 Highcharts 气泡图。

我原以为图表上的气泡彼此成比例(即“2”的气泡在多重图表中是一致的)但是，它似乎是基于图表上的点的范围.

这在 this fiddle 中突出显示

如您所见，图表 2 中的“2”与图表 1 中的“6”大小相同。我希望图表 #2 中的“2”与图表 #1 中的“2”的大小相匹配。

有什么办法可以实现吗？

代码如下:

jQuery(function () {

var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
            { x: 1, y: 1, z: 1, label: 'data #2' },
            { x: 2, y: 2, z: 2, label: 'data #3' },
            { x: 3, y: 3, z: 3, label: 'data #4' },
            { x: 4, y: 4, z: 4, label: 'data #5' },
            { x: 5, y: 5, z: 5, label: 'data #6' },
            { x: 6, y: 6, z: 6, label: 'data #7' }]; 

var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
            { x: 1, y: 1, z: 1, label: 'data #2' },
            { x: 2, y: 1, z: 1, label: 'data #3' },
            { x: 3, y: 2, z: 2, label: 'data #4' },
            { x: 4, y: 2, z: 2, label: 'data #5' },
            { x: 5, y: 1, z: 1, label: 'data #6' },
            { x: 6, y: 0, z: 0, label: 'data #7' }]; 

jQuery('#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']
    },

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

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

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


jQuery('#container2').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']
    },

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

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

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


});

Answer 1

这类似于我在 Stack Overflow 上其他地方提出的另一个气泡图问题的答案:

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

对于您的情况，似乎在您的图表中添加一个具有最大可能尺寸的透明、非交互式“虚拟”气泡将使每个其他气泡彼此保持适当的比例:

series: [{ data: data2 }, 
    // dummy series to keep all the bubbles in proportion
    {name: 'dummy series',
    data: [{x:6,y:6,z:6}], 
    showInLegend: false, 
    color: 'transparent', 
    enableMouseTracking: false}
]

这是你的 fiddle 的更新版本，修复了这个问题:http://jsfiddle.net/brightmatrix/svcuLgso/13/

如果这能解决您的问题，请告诉我!