Показать кучу ссылок в виде облака - PullRequest
Новая
       42

Показать кучу ссылок в виде облака

0 голосов
/ 08 июля 2011

Мой клиент хочет, чтобы я создал страницу с кучей внешних ссылок, отображаемых в виде облака.Он хочет иметь возможность добавлять внешние ссылки и редактировать размер шрифта и его цвет.

Это облако должно располагаться в центре страницы и расти от центра.Я нашел готовое решение, но оно не работает идеально и требует исправления.Я пытался это исправить, но, к сожалению, не удалось.Например, я не могу понять, почему изменение цвета не работает.Вот оно: 

    <?

      $array = array (
    0 => array ('link' => 'http://123.com', 'name' => 'qq', 'cnt' => 100)
  , 1 => array ('link' => 'http://123.com', 'name' => 'ww', 'cnt' => 2)
  , 2 => array ('link' => 'http://123.com', 'name' => 'ee', 'cnt' => 3)
  , 3 => array ('link' => 'http://123.com', 'name' => 'rr', 'cnt' => 61)
  , 4 => array ('link' => 'http://123.com', 'name' => 'tt', 'cnt' => 5)
  , 5 => array ('link' => 'http://123.com', 'name' => 'yy', 'cnt' => 60)
  , 6 => array ('link' => 'http://123.com', 'name' => 'uu', 'cnt' => 7)
  , 7 => array ('link' => 'http://123.com', 'name' => 'ii', 'cnt' => 8)
  , 8 => array ('link' => 'http://123.com', 'name' => 'iii', 'cnt' => 9)
  , 9 => array ('link' => 'http://123.com', 'name' => 'oo', 'cnt' => 10)
  , 10 => array ('link' => 'http://123.com', 'name' => 'pp', 'cnt' => 11)
  , 11 => array ('link' => 'http://123.com', 'name' => 'aa', 'cnt' => 12)
  , 12 => array ('link' => 'http://123.com', 'name' => 'ss', 'cnt' => 10)
  , 13 => array ('link' => 'http://123.com', 'name' => 'dd', 'cnt' => 11)
  , 14 => array ('link' => 'http://123.com', 'name' => 'ff', 'cnt' => 12)
  , 15 => array ('link' => 'http://123.com', 'name' => 'gg', 'cnt' => 10)
  );

  echo '<div style="font-family:arial; font-size: 10px; width: 300px; text-align: center; position: absolute;
    top: 100px;    left: 50%;    margin-left: -150px;">';
  $params['min_size'] = 100;                    
  $params['max_size'] = 1000;                    
  $params['colors'] = array(0 => 'red', 1 => 'blue', 2 => 'brown', 3 => 'pink', 4 => 'green');
  ntts_cloud_ShowCloud($array, $params);
  echo '</div>';


 function ntts_cloud_FlipArray($array)
    {
      $rows = array_keys($array);
      $first_row_key = $rows[0];
      $cols = array_keys($array[$first_row_key]);

      $rows_cnt = count($rows);
      $cols_cnt = count($cols);

      for($i = 0; $i < $rows_cnt; $i++)
      {
        for($j = 0; $j < $cols_cnt; $j++)
        {
          $result[$cols[$j]][$rows[$i]] = $array[$rows[$i]][$cols[$j]];
        }
      }
      return $result;    
    }


function ntts_cloud_ShowCloud($entries, $config = 0)
    {
      //$entries is array of cloud elements
      //each element should be present as associative array with follows keys 
      //'name' - name of the element
      //'link' - URL
      //'cnt'  - weight of the element


      $colors = array(
      0 => '73cf3b', 
      1 => '000', 
      2 => '000', 
      3 => '000',
      4 => '000', 
      5 => 'red', 
      6 => '000', 
      7 => '000',
      8 => '000', 
      9 => '000', 
      10 => '000', 
      11 => '000',
      12 => '000', 
      13 => '000', 
      14 => '000', 
      15 => '000');                  
      //font size in percent
      $min_size = (isset($config['min_size'])) ? $config['min_size'] : 100;
      $max_size = (isset($config['max_size'])) ? $config['max_size'] : 200;

      if(is_array($config))
      {
        if(isset($config['colors']) && is_array($config['colors']))
        {
          $colors = $config['colors'];
        }
      }


      $flipped = ntts_cloud_FlipArray($entries);
      $min        = min($flipped['cnt']);
      $max        = max($flipped['cnt']);
      array_multisort($flipped['cnt'], SORT_DESC, $flipped['name'], $flipped['link']);
      $entries = ntts_cloud_FlipArray($flipped);

      $shown_entries = array();
      $keys          = array();
      $cnt = count($entries);

      $limit = (isset($config['limit'])) ? min($config['limit'], $cnt) : $cnt;

      for($i = 0; $i < $limit; $i++)
      {
        $entries[$i]['cnt'] -= $min;
        if($max > $min)
        {
          $entries[$i]['cnt'] /= ($max - $min);
        }      
        $entries[$i]['cnt'] *= ($max_size - $min_size);
        $entries[$i]['cnt'] += $min_size;
        $entries[$i]['cnt']  = round($entries[$i]['cnt']);
        $key = md5($entries[$i]['name']);
        $shown_entries[$key] = $entries[$i];
        $keys[$i] = $key;
        //проверка корректности url на наличие префикса http://
        if(!preg_match('/^http:/i', $entries[$i]['link'])) 
        {
          $shown_entries[$key]['link'] = 'http://'.$entries[$i]['link'];
        }
      }


      sort($keys);
      $cnt = count($keys);
      $colors_cnt = count($colors);
      for($i = 0; $i < $cnt; $i++)
      {
        $key = $keys[$i];
        $idx = hexdec($key[31]) % $colors_cnt;
        $color = $colors[$idx];
        echo '<nobr><a href='.$shown_entries[$key]['link']
          .' style="font-size:'.$shown_entries[$key]['cnt'].'%; '
          .' text-decoration:none; color: #'.$color.';'
          .'">'.$shown_entries[$key]['name'].'</a></nobr> ' ;
      }

    }



 ?>

<?                 error_reporting(7);


 function ntts_cloud_ShowCloud($entries, $config = 0)
    {

      foreach ($entries as $line)
      {
        echo '<nobr><a href='.$line['link']
          .' style="font-size:'.$line['cnt'].'px; '
          .' text-decoration:none; color: '.$line['color'].';'
          .'">'.$line['name'].'</a></nobr> ' ;
      }

    }

$array = array (
    0 => array ('link' => 'http://1.ru', 'name' => 'kdsf', 'cnt' => 18,'color'=>'red')
  , 1 => array ('link' => 'http://1.ru', 'name' => 'ddd', 'cnt' => 12,'color'=>'green')
  , 2 => array ('link' => 'http://1.ru', 'name' => ' ddd', 'cnt' => 26,'color'=>'black')
  , 3 => array ('link' => 'http://1.ru', 'name' => 'jjj', 'cnt' => 16,'color'=>'blue')
  , 4 => array ('link' => 'http://1.net', 'name' => 'ccc', 'cnt' => 38,'color'=>'#555555')
  , 5 => array ('link' => 'http://1.ru', 'name' => 'llll', 'cnt' => 40,'color'=>'gray')
  , 6 => array ('link' => 'http://1.net', 'name' => 'xxxx', 'cnt' => 15,'color'=>'red')
  , 7 => array ('link' => 'http://1.ru', 'name' => 'wewe', 'cnt' => 23,'color'=>'yellow')
  , 8 => array ('link' => 'http://1.ru', 'name' => 'ddd', 'cnt' => 30,'color'=>'#1234d5')
  );

  echo '<div style="margin-left:30%;font-family:arial; font-size: 10px; width: 300px; text-align: center">';
  ntts_cloud_ShowCloud($array, $params);
  echo '</div>';

  ?>

1 Ответ

0 голосов
/ 08 июля 2011

Просто удалите «#» в этой строке: 

.' text-decoration:none; color: #'.$color.';'
...