Javascript 海图-气泡图-比例气泡

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

我本以为图表上的气泡大小与其他气泡大小成比例（即“2”的气泡通过多重LPE图表是一致的），但它似乎是基于图表上的点范围

这一点在

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


});

jQuery（函数（）{
var data1=[{x:0，y:0，z:0，标签：'data#1'}，
{x:1，y:1，z:1，标签：'data#2'}，
{x:2，y:2，z:2，标签：'data#3'}，
{x:3，y:3，z:3，标签：'data#4'}，
{x:4，y:4，z:4，标签：'data#5'}，
{x:5，y:5，z:5，标签：'data#6'}，
{x:6，y:6，z:6，标签：'data#7'}]；
var data2=[{x:0，y:0，z:0，标签：'data#1'}，
{x:1，y:1，z:1，标签：'data#2'}，
{x:2，y:1，z:1，标签：'data#3'}，
{x:3，y:2，z:2，标签：'data#4'}，
{x:4，y:2，z:2，标签：'data#5'}，
{x:5，y:1，z:1，标签：'data#6'}，
{x:6，y:0，z:0，标签：'data#7'}]；
jQuery（“#容器”）.highcharts({
图表：{
类型：'气泡'，
打印边框宽度：1，
zoomType:'xy'
},
学分：假，
图例：{
已启用：false
},
标题：{
文本：“”
},
xAxis：{
网格线宽度：1，
标题：{
文本：“”
},
类别：[‘数据1’、‘数据2’、‘数据3’、‘数据4’、‘数据5’、‘数据6’、‘数据7’]
},
亚克斯：{
是的，
最小：-1，
最高：7，
showFirstLabel:false，
showLastLabel:false，
时间间隔：1，
标题：{
文字：“分数”
},
标签：{
格式：“{value}”
},
最大填充：0.2
},
工具提示：{
是的，
总部：''，
pointFormat:“{point.label}”+
'分数：{point.y}'，
页脚格式：“”，
followPointer:true
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：“{point.name}”
}
}
},
系列：[{data:data1}]
});
jQuery（'#container2'）。highcharts({
图表：{
类型：'气泡'，
打印边框宽度：1，
zoomType:'xy'
},
学分：假，
图例：{
已启用：false
},
标题：{
文本：“”
},
xAxis：{
网格线宽度：1，
标题：{
文本：“”
},
类别：[‘数据1’、‘数据2’、‘数据3’、‘数据4’、‘数据5’、‘数据6’、‘数据7’]
},
亚克斯：{
是的，
最小：-1，
最高：7，
showFirstLabel:false，
showLastLabel:false，
时间间隔：1，
标题：{
文字：“分数”
},
标签：{
格式：“{value}”
},
最大填充：0.2
},
工具提示：{
是的，
总部：''，
pointFormat:“{point.label}”+
'分数：{point.y}'，
页脚格式：“”，
followPointer:true
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：“{point.name}”
}
}
},
系列：[{数据：数据2}]
});
});

这类似于我在堆栈溢出的其他地方提出的另一个气泡图问题的答案：

就你的情况而言，在你的图表中添加一个具有最大可能维度的透明、非交互的“虚拟”气泡将使其他气泡保持适当的比例：

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}
]

以下是此修复程序的更新版本：

---

请让我知道这是否解决了您的问题

不客气！有一天，我偶然发现了这个解决方案，所以我很高兴它对你有用。如果我能提供进一步的帮助，请告诉我。