圓圈中的數據分佈

假設我有元素（E1, E2, ... ,En），它們的單個值在[1; 100]之間變化。我有一個圓圈（見下圖），每兩個圓圈代表數據範圍。
問題是如何在這個圈子中顯示E這些元素的分佈。下圖描述了圓圈中E的一些元素的分佈，其中例如E1=10, E2=35,...,E6=100, E7=91。 PHP中是否有任何現成的庫或jQuery中的任何插件或任何現成的解決方案？
我需要使用HTML + CSS + jQuery在我的網絡應用中實現這個問題（請不要使用Flash技術提供解決方案）。
注意：這就像在MS Excel中創建圖表。例如，在MS Excel中有一個圖表類型，稱爲雷達或多或少地實現這個問題，但在我的情況下，我有圓形而不是多邊形，我只有有限的範圍[1;100]。
圓圈中的數據分佈

編輯
我忘了交代，在該圖對象元件，它的中心是在此基礎上，我們都出現了分佈對象。如果元素匹配對象具有更多的百分比，因此接近對象，反之亦然。 Distribution of data in the circle http://i47.tinypic.com/dqisyo.jpg

來源

2010-06-22 Bakhtiyor

你爲什麼標籤這個PHP？從您的描述來看，服務器端解決方案似乎不可接受。 – Artefacto 2010-06-22 12:13:44

我假設PHP，因爲也許我會用一些準備好的庫在PHP中創建這個圖形，並向客戶端發送圖像。 – Bakhtiyor 2010-06-22 12:23:37

這是不完整的，看到GD手冊上如何添加文字等

<?php 
$size = 501; //odd 

$img = imagecreatetruecolor($size, $size); 

$center = array((int) ($size/2), (int) ($size/2)); 
$colors['white'] = imagecolorallocate($img, 255, 255, 255); 
$colors['black'] = imagecolorallocate($img, 0, 0, 0); 
$colors['blue'] = imagecolorallocate($img, 0, 0, 255); 

imagefill($img, 0, 0, $colors['white']); 

$valid_rad = array((int) (($center[0] - 1) * .2), (int) (($center[0] - 1) * .9)); 

function radius_for($percentage, $valid_rad) { 
    return $valid_rad[1] - ($valid_rad[1] - $valid_rad[0]) * 
     ($percentage/100); 
} 

foreach (array(0,25,50,75,100) as $perc) { 
    $radius = radius_for($perc, $valid_rad); 
    imagearc($img, $center[0], $center[1], $radius*2, $radius*2, 
     0, 360, $colors['black']); 
} 


foreach (array(100,85,70,36,23,2) as $perc) { 
    $radius = radius_for($perc, $valid_rad); 
    $angle = pi() * 1.25 + ((rand(0,100) - 50)/50) * .5; 
    $x = (int) ($radius * cos($angle)) + $center[0]; 
    $y = (int) ($radius * sin($angle)) + $center[1]; 

    imagefilledellipse($img, $x, $y , 20, 20, $colors['blue']); 
} 


header("Content-type: image/png"); 
imagepng($img);

這給了這樣的畫面：

sample

來源

2010-06-22 16:29:11 Artefacto

非常感謝。這是非常快的答覆。現在我將嘗試使用HTML5 + CSS + jQuery中的canvas進行此操作。我認爲這並不難。我會遵循你的算法。 – Bakhtiyor 2010-06-22 16:55:16

當rand（0,100）產生相似的數字時，唯一的問題是元素重疊。 – Bakhtiyor 2010-06-22 16:58:15

@Bakhtiyor那麼，你可以生成'n'個不同的隨機數（如果你之前看到一個數字，則重新生成），將'（（rand（0,100） - 50）/ 50）* .5'改爲'（（rand（0 ，20） - 10）/ 10）* .5'，使得數字不太相似或增加倍增因子'.5'，使得圓圈更加分散。 – Artefacto 2010-06-22 17:05:15

我不知道任何這樣的預製圖。但是，您可能可以使用具有自定義背景的散點圖進行復制。 Here是一些jquery的。您必須執行數學運算以創建距離中心點適當距離的x，y座標，但圖表插件應負責其餘部分。

來源

2010-06-22 12:27:56 Joshua

圓圈中的數據分佈

回答

相關問題