Flot Bubbles 插件 - 气泡大小

Posted 2023-02-18

【中文标题】Flot Bubbles 插件 - 气泡大小

【英文标题】：Flot Bubbles Plugin - Bubble Size

【发布时间】：2016-01-14 08:17:57

【问题描述】：

我正在使用带有 JQuery 的 Flot 图表库的 Bubbles 插件。我拥有的数据是动态的，并且在 X、Y 和 Z 值内变化很大。我遇到的主要问题是气泡的大小。如果 X 和 Y 值彼此接近但 Z 值大得多，则气泡会简单地占据图表。设置 X 轴和 Y 轴的轴最小值和最大值会有所帮助，但并非在所有情况下都如此。我试图寻找其他选项和设置，但没有发现任何有用的东西。有什么方法可以控制气泡的大小吗？

例如，Flex 用于自动创建相对于屏幕和轴的气泡大小，而 Flot 似乎总是将气泡大小设置为与 X 和 Y 值相同的比例。我只包含了一个数据样本。我想继续使用 Flot 作为插件，因为我的应用程序中有许多其他图表类型，并且想使用相同的代码库。但是，如果有另一个插件会更好，我愿意接受想法。谢谢！

https://jsfiddle.net/llamajuana/zd4hd7rb/

var d1 = [[30,339,139856], [30, 445,239823], [30,1506,127331]];

    var options =  
        series: 
            //color: '#CCC',
            color: function(x, y, value) 
                var red = 55 + value * 10;
                return 'rgba('+red+',50,50,1)';
            ,
            bubbles: 
                active: true,
                show: true,
                fill: true,
                linewidth: 0,
                bubblelabel:  
                    show: true 
                ,
                highlight: 
                    show: true,
                    opacity: 0.3
                
            
        ,
        grid:
            hoverable: true,
            clickable: true
        ,

        tooltip: 
            show: true,
            content: "x: %x | y: %y | value: %ct"
        
    ;
    var p4 = $.plot( $("#plot"), [d1], options );

【问题讨论】：

有趣的问题。您多久会说一次z 值明显大于x / y 值？

它可以在任何时候，所以我真的没有时间比例。它也不一定是 Z 值。我遇到过 X 和 Z 值范围从 0 到 10 但 Y 可能范围从 -10 到 13000 的实例。

哦，我明白了。我在考虑这些方面：由于z 值仅显示在工具提示中（对吗？）那么也许您可以将实际值的1/1000 提供给[d1] 数组，然后在定义内容时对于工具提示，将%ct 乘以1,000。但是，似乎这种思路行不通：/

我通读了两个插件的文档，似乎没有找到任何适用于您需要的东西。

我确实考虑过尝试缩小 Z。但是，是的，其他值也会发生这种情况。也许我将不得不花时间尝试缩放 Z 并尝试手动调整轴限制，看看我是否能找到仍然具有视觉吸引力的东西。感谢您的帮助，我也没有在文档中看到任何内容。我也没有找到很多其他的例子，我猜人们不太喜欢气泡图。

【参考方案1】：

您可以尝试对数缩放。

对于 x 轴和 y 轴，您可以使用 transform property in the axis options 或在绘制绘图之前更改数据。

对于气泡，您必须手动执行此操作，方法是在绘制之前更改数据或替换气泡插件的drawbubble 函数（参见用户绘制示例here） .

有关完整示例，请参阅此 fiddle。小提琴的变化：

1) 如果需要，您可以直接在气泡插件中进行更改。

// index of bubbles plugin is dynamic, you better search for it
var defaultBubbles = $.plot.plugins[1].options.series.bubbles.drawbubble;
var logBubbles = function(ctx, serie, x, y, v, r, c, overlay)
    defaultBubbles(ctx, serie, x, y, v, Math.log(r), c, overlay);

2) 在系列选项中：

xaxis: 
    transform: function (v) 
        return Math.log(v);
    ,
    inverseTransform: function (v) 
        return Math.exp(v);
    
,
yaxis: 
    transform: function (v) 
        return Math.log(v);
    ,
    inverseTransform: function (v) 
        return Math.exp(v);
    
,

3) 在气泡插件的radiusAtPoint() 函数中：

    // added Math.log function here too
    return parseInt(series.yaxis.scale * Math.log(series.data[radius_index][2]) / 2, 0);

【讨论】：

谢谢！这效果很好。它似乎与工具提示有点搞混了，所以我只需要尝试弄清楚如何更新悬停的点击区域。