在网站上嵌入气泡图表

我正在寻找一种方法来创建什么来知道被称为我正在建设的网站的“气泡图”。它需要兼容IE7及以上版本，当然还有所有优秀的浏览器，如Firefox，Chrome和Safari。因为这个东西需要在iOS上运行，所以没有闪光灯。在网站上嵌入气泡图表

图表需要这个样子，http://www.flickr.com/photos/jgrahamthomas/5591441300/

我已经在网上浏览和尝试了一些事情，包括：

谷歌散点图。这不起作用，因为Google Charts似乎将点的大小限制为小于我需要的大小。而维恩图仅限于三个圈子。
Protovis点。伟大的图书馆，但与IE8不兼容。
Raphael Javascript。这可能是我最好的选择，但没有明确支持气泡图。

感谢您的帮助。

来源

2011-04-05 Jeremy Thomas

你可以创建它作为服务器端的图像？ – Bemmu 2011-04-05 05:12:56

不是一个坏主意。你能推荐任何图书馆吗？ – 2011-04-06 03:14:29

你可以给Protovis一个偶然的机会，库看起来好您的需求：http://vis.stanford.edu/protovis/ex/

另一个图表库是Highcharts，但我还没有尝试过：http://www.highcharts.com/

来源

2011-04-05 06:47:48

谢谢。我试过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); 
# }

来源

2011-04-06 03:34:40

你有没有看看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-29 11:23:40 mludd

不错，我会检查出来。我会投这个答案，但不能，因为我在这里还是比较新的。 – 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在这方面做得非常好（混合了其他类型的泡沫图表），但对我们来说却不是免费的（政府环境）。

来源

2013-07-11 22:32:04

在网站上嵌入气泡图表

回答

相关问题