Question

我正在使用Bubbles插件和JQuery的Flot图表库。我拥有的数据是动态的，可以在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 );

Answer 1

您可以尝试对数缩放。

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

对于气泡，您必须手动执行此操作，方法是在绘制前更改数据或替换气泡插件的drawbubble功能（请参阅用户绘制示例{{ 3}}）。

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

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）在bubbles插件的radiusAtPoint()函数中：

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

Flot Bubbles插件 - 气泡大小

1 个答案: