Question

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

我曾预计图表上的气泡会按比例调整大小（即'2'的气泡在多图表中是一致的）但是，它似乎是基于图表上的点数范围

中突出显示

如您所见，图表＃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}
]

以下是此修补程序的更新版本：http://jsfiddle.net/brightmatrix/svcuLgso/13/

如果这可以解决您的问题，请告诉我！

Highcharts - 气泡图 - 比例气泡

1 个答案: