Question

我正在寻找一种方法来创建我所建立的网站所谓的“气泡图”。它需要与IE7及更高版本兼容，当然还有Firefox，Chrome和Safari等所有优秀的浏览器。并且没有闪存，因为这件事需要在iOS上运行。

图表需要如下所示http://www.flickr.com/photos/jgrahamthomas/5591441300/

我在线浏览并尝试了一些方法，包括：

Google Scatter Charts。这不起作用，因为Google Charts似乎将点的大小限制为小于我需要的值。而Venn Diagrams仅限于三个圈子。
Protovis Dots。很棒的库，但与IE8不兼容。
Raphael Javascript。这可能是我最好的选择，但没有对气泡图的明确支持。

感谢您的帮助。

Answer 1

看起来像Raphael javascript是要走的路。它与IE6兼容。我在http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/找到了一个很棒的教程，并且能够使用以下代码在我的rails网站上运行示例：

# 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);  
# }

Answer 2

你可以给Protovis一个机会，图书馆看起来很符合你的需求：http://vis.stanford.edu/protovis/ex/

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

Answer 3

你看过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 */
];

Answer 4

flot here有一个气泡图请注意，如果您不希望它们覆盖图形，则需要自己缩放气泡大小。文档为here。

要使用它，请在html页面的开头添加以下内容：

并从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在这里做得非常好（将泡泡图与其他类型的系列混合）但对我们来说并不是免费的（政府背景）。

在网站上嵌入气泡图

4 个答案: