在網站上嵌入氣泡圖表

我正在尋找一種方法來創建什麼來知道被稱爲我正在建設的網站的「氣泡圖」。它需要兼容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

在網站上嵌入氣泡圖表

回答

相關問題