为什么这个Highcharts jsFiddle示例的最小气泡大小看起来不正确?我该如何修复它?

nbnkbykc  于 2022-11-11  发布在  Highcharts
关注(0)|答案(2)|浏览(151)

我正在创建一个气泡图,但在最小气泡尺寸方面遇到了问题,这些最小气泡的行为与我预期的不一样。在文档中搜索了一些内容以了解该问题后,我发现了以下内容:https://api.highcharts.com/highcharts/plotOptions.bubble.sizeBy
我不想更改'sizeBy'的默认Area设置(这对我的数据最有意义),但JSFiddle中的API条目旁边有一个有用的示例:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bubble-sizeby/

Highcharts.chart('container', {
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: 'Highcharts Bubbles Sizing'
    },
    subtitle: {
        text: 'Smallest and largest bubbles are equal, intermediate bubbles different.'
    },

    xAxis: {
        gridLineWidth: 1
    },

    yAxis: {
        startOnTick: false,
        endOnTick: false
    },

    series: [{
        data: [
            [1, 1, 1],
            [2, 2, 2],
            [3, 3, 3],
            [4, 4, 4],
            [5, 5, 5]
        ],
        sizeBy: 'area',
        name: 'Size by area'
    }, {
        data: [
            [1, 1, 1],
            [2, 2, 2],
            [3, 3, 3],
            [4, 4, 4],
            [5, 5, 5]
        ],
        sizeBy: 'width',
        name: 'Size by width'
    }]
});

请记住,我只对按区域显示感兴趣(默认设置)、我不明白的是为什么第一个泡沫(其z值为1)与其他气泡相比非常小。其面积应为第二个气泡面积的0.5倍(其z值为2)。但它要小得多(大约是面积的1/10)。然而,所有其他气泡的比例似乎都是正确的--它实际上只是第一个气泡。
所以我的问题是--为什么第一个泡沫这么小,有没有办法防止这种情况发生,让所有的泡沫都按面积成比例?
非常感谢,
大卫
随访:
我在jsFiddle中创建了一个更极端的例子,只有两个气泡--一个是另一个的一半,所以它的面积(或宽度)也应该是另一个的一半--但事实并非如此。
https://jsfiddle.net/2m75nwhf/1/
我可能完全误解了API,但我现在想这可能只是一个错误?

ckocjqey

ckocjqey1#

您正在寻找minSize属性。在Highcharts API中,我们可以读取:

minSize:数字,字符串

最小气泡大小。气泡大小将自动介于minSize和maxSize之间,以反映每个气泡的z值。可以是像素(未指定单位时),也可以是绘图宽度和高度中最小的一个的百分比。

现场演示:https://jsfiddle.net/BlackLabel/5kspqn1h/
API参考:

https://api.highcharts.com/highcharts/series.bubble.maxSize
https://api.highcharts.com/highcharts/series.bubble.minSize

rfbsl7qr

rfbsl7qr2#

目前我解决这个问题的方法是创建一个假的数据点,其值低于数据集中的其他值。我在这里发帖是为了防止其他人遇到类似的问题。如果有一种方法可以通过API来实现这一点,那将是更好的选择,我将删除这些代码。我将继续寻找更优雅的解决方案。
绘制气泡图后,我将删除伪数据点。
所以我有这样的东西;

var minValue = 0.0000000001; // some fake minimum value (or better, calculate it programmatically from the actual data)

        data.push({.  // this is how I am structuring the data for my data set
            id: "fakeMinValue", 
            lat: 50, // these lat/lon values give a location somewhere in France — it's important to make sure the lon/lat values are on within your actual map
            lon: 2,  
            z: minValue
        })

然后我画我的Map...

var bubbleMap = Highcharts.mapChart(containerID, {
           ...
        }

在绘制之后,在代码中,我使用以下命令删除伪数据点:

bubbleMap.get('fakeMinValue').remove(false); // 'false' prevents HighMaps from redrawing the map without the fake data point which would otherwise defeat the purpose

相关问题