我正在将 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 );
最佳答案
您可以尝试对数缩放。
对于 x 轴和 y 轴,您可以使用 transform property in the axis options 来执行此操作或在绘制绘图之前更改数据。
对于气泡,您必须手动执行此操作,方法是在绘制之前更改数据或替换气泡插件的 drawbubble
函数(请参阅用户绘制例如here)。
查看此fiddle完整的例子。你的 fiddle 的变化:
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);
关于javascript - Flot Bubbles 插件 - 气泡大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33155896/