在网站上嵌入气泡图表
我正在寻找一种方法来创建什么来知道被称为我正在建设的网站的“气泡图”。它需要兼容IE7及以上版本,当然还有所有优秀的浏览器,如Firefox,Chrome和Safari。因为这个东西需要在iOS上运行,所以没有闪光灯。在网站上嵌入气泡图表
图表需要这个样子,http://www.flickr.com/photos/jgrahamthomas/5591441300/
我已经在网上浏览和尝试了一些事情,包括:
- 谷歌散点图。这不起作用,因为Google Charts似乎将点的大小限制为小于我需要的大小。而维恩图仅限于三个圈子。
- Protovis点。伟大的图书馆,但与IE8不兼容。
- Raphael Javascript。这可能是我最好的选择,但没有明确支持气泡图。
感谢您的帮助。
你可以给Protovis一个偶然的机会,库看起来好您的需求:http://vis.stanford.edu/protovis/ex/
另一个图表库是Highcharts,但我还没有尝试过:http://www.highcharts.com/
谢谢。我试过Protovis,但它与IE8不兼容。不幸的是,高图没有气泡图选项。 – 2011-04-05 22:00:48
它看起来像拉斐尔JavaScript是要走的路。它与IE6兼容。我发现在http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/一个伟大的教程和我能够获得例如在我的轨道现场工作与此代码:
# window.onload = function() {
# var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
# var circle = paper.circle(100, 100, 80);
# for(var i = 0; i < 5; i+=1) {
# var multiplier = i*5;
# paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
# }
# var rectangle = paper.rect(200, 200, 250, 100);
# var ellipse = paper.ellipse(200, 400, 100, 50);
# }
你有没有看看flot?
这是一个jQuery绘图库。虽然它在技术上没有任何“原生”支持气泡图,但可以通过使用一些技巧创建气泡图,最简单的可能是简单地将每个点放入其自己的数据系列中(从而允许您控制每个点的半径
通过定义类似于这样你的观点,你就可以创建一个气泡图:
var dataSet = [{
color:"rgba(0,0,0,0)", // Set the color so it's transparent
shadowSize:0, // No drop shadow effect
data: [[0,1],], // Coordinates of the point, normally you'd have several
// points listed here...
points: {
show:true,
fill:true,
radius: 2, // Here we set the radius of the point (or rather, all points
// in the data series which in this case is just one)
fillColor: "rgba(255,140,0,1)", // Bright orange :D
}
},
/* Insert more points here */
];
不错,我会检查出来。我会投这个答案,但不能,因为我在这里还是比较新的。 – 2011-04-30 16:25:16
有气泡图可用于海军报here 请注意,您如果您不希望它们覆盖图表,则需要自行调整气泡大小。文档是here。
要使用它,添加以下的HTML页面的beggining:
,并从JSON结果调用或该样本中的任何数据对象,如:
$.getJSON('myQuery.py?'+params, function(oJson) {
// ... Some validation here to see if the query worked well ...
$.plot('#myContainer',
// ---------- Series ----------
[{
label: 'Line Sample',
data: oJson.lineData,
color: 'rgba(192, 16, 16, .2)',
lines: { show: true },
points: { show: false }
},{
label: 'Bubble Sample',
data: oJson.bubbleData, // arrays of [x,y,size]
color: 'rgba(80, 224, 80, .5)',
lines: { show: false },
points: { show: false },
},{
label: 'Points sample',
data: oJson.pointsData,
color: 'rgba(255, 255, 0, 1)',
lines: { show: false },
points: { show: true, fillColor: 'rgba(255, 255, 0, .8)' }
},{
...other series
}],
// ---------- Options ----------
{ legend: {
show: true,
labelBoxBorderColor: 'rgba(32, 32, 32, .2)',
noColumns: 6,
position: "se",
backgroundColor: 'rgba(224, 224, 224, .2)',
backgroundOpacity: .2,
sorted: false
},
series: {
bubbles: { active: true, show: true, fill: true, linewidth: 2 }
},
grid: { hoverable: true, clickable: true } },
xaxis: { tickLength: 0 }
}); // End of plot call
// ...
}); // End of getJSON call
我试图用jqPlot做同样的事情,它具有一些优点,但不能在同一个图上使用气泡和其他类型的系列。另外,Flot在将许多系列的公共轴标尺同步方面做得更好。 Highchart在这方面做得非常好(混合了其他类型的泡沫图表),但对我们来说却不是免费的(*环境)。
你可以创建它作为服务器端的图像? – Bemmu 2011-04-05 05:12:56
不是一个坏主意。你能推荐任何图书馆吗? – 2011-04-06 03:14:29