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

nbnkbykc 于 2022-11-11 发布在 Highcharts

关注(0)|答案(2)|浏览(150)

我正在创建一个气泡图，但在最小气泡尺寸方面遇到了问题，这些最小气泡的行为与我预期的不一样。在文档中搜索了一些内容以了解该问题后，我发现了以下内容：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，但我现在想这可能只是一个错误？

highcharts

来源：https://stackoverflow.com/questions/70214694/why-does-the-smallest-bubble-size-of-this-highcharts-jsfiddle-example-seem-incor

2条答案

按热度按时间

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

赞(0）回复(0）举报 2022-11-11

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

赞(0）回复(0）举报 2022-11-11

我来回答

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

2条答案

相关问题

热门标签

最新问答