Распределение данных по кругу - PullRequest
Новая
       9

Распределение данных по кругу

0 голосов
/ 22 июня 2010

Допустим, у меня есть элементы (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].


Редактировать
Я забыл упомянуть, что на этом рисунке элемент объекта , находящийся в центре, является объектом, на основе которогомы показываем распределение.Если элемент соответствует объекту с большим процентом, закройте его объектом и наоборот. Распределение данных по кругу http://i47.tinypic.com/dqisyo.jpg

Ответы [ 2 ]

2 голосов
/ 22 июня 2010

Это неполно, см. Руководство 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

1 голос
/ 22 июня 2010

Я не знаю ни одного готового графика, подобного этому. Однако вы можете скопировать его на точечный график с пользовательским фоном. Здесь - некоторые из jquery. Чтобы создать координаты x, y с соответствующим расстоянием от центральной точки, вам придется выполнить математические операции, но плагин диаграммы должен позаботиться об остальном.

...