Javascript Flot气泡插件-气泡大小

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

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

---

你可以试试对数缩放

对于x轴和y轴，可以在绘制绘图之前使用或更改数据来执行此操作

对于气泡，您必须手动执行此操作，可以在绘制之前更改数据，也可以替换气泡插件的

drawbubble

功能（请参见用户绘制示例）

完整的例子见此。小提琴的变化：

1） 如果您愿意，您可以直接在bubbles插件中更改

// 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);

---

有趣的问题。你多久会说

z

值明显大于

x

/

y

值？它可以在任何时候出现，所以我没有时间的比率。它也不一定是Z值。我曾经有过这样的例子，X和Z值从0到10，但Y值可能从-10到13000。哦，我明白了。我的想法是这样的：由于

z

值仅显示在工具提示中（对吗？），那么也许您可以向

[d1]

数组提供实际值的

1/1000

，然后在定义工具提示的内容时，将

%ct

乘以

1000

。然而，这种思路似乎行不通：/我通读了两个插件上的文档，似乎没有找到任何适用于您需要的东西。我确实考虑过尝试缩小Z。但是，是的，其他值也会发生这种情况。也许我将不得不花时间尝试缩放Z轴，但也尝试手动调整轴限制，看看是否可以找到仍然具有视觉吸引力的东西。谢谢你的帮助，我在文件里也没有看到任何东西。我也没有找到很多其他的例子，我想人们不太喜欢气泡图。谢谢！这一切都很顺利。它似乎与工具提示有点冲突，所以我只需要尝试找出如何更新悬停的命中区域。

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