Question

我想更改订单跟踪图的当前图像（或状态栏显示img及其进度）我想更改当前图像并将状态更改为6（20％，40％， 60％，80％，90％100％）我已经为它制作了7张图片，

第一个代码理念：我想要，每个百分比＆＃34; 20％，40％，60％，80％，90％100％＆＃34;如果状态或百分比是20，则会有自己的图像，它将显示img 20（想法/代码在下面注意：第一个代码）

第二个代码如下：现在，它需要两个图像，一个空，一个填充，并显示填充的一个％宽度，对应于给定状态的完成百分比。例如，对于27％完成的状态，将显示27％的填充图像。如果您创建了一个空的和填充的图像，然后将它们命名为与插件的默认图像相同，并将它们上传到＆＃34;图像＆＃34;该插件的文件夹，它将使用您的新图像而不是默认图像。

此插件的订单跟踪插件链接：https://wordpress.org/plugins/order-tracking/ 您可以在此处查看原始代码：订单跟踪文件夹＆gt;功能文件夹＆gt; DisplayGraph.php

这是我朋友的想法，我想实现它，

 <style>
        .progress{
            width:50px;
            height:50px;
        }
        .class_1{
            background-image:url(/images/image1.jpg);
        }
        .class_2{
            background-image:url(/images/image2.jpg);
        }
        .class_3{
            background-image:url(/images/image3.jpg);
        }
        .class_4{
            background-image:url(/images/image4.jpg);
        }
        .class_5{
            background-image:url(/images/image5.jpg);
        }
    </style>



    <?php
        /* define your function outside of any loops */
        function setimage( $i=0 ){
            if( $i>=0 && $i<=20 ) return 'class_1';
            elseif( $i > 20 && $i <= 40 ) return 'class_2';
            elseif( $i > 40 && $i <= 60 ) return 'class_3';
            elseif( $i > 60 && $i <= 80 ) return 'class_4';
            else return 'class_5';
        }

        /* the portion of your html that displays the graphic percentage representation */
        $ReturnString .= "<div id='progress' class='progress ".setimage( $DisplayLength )."'></div>";


    ?>

这是我想要更改的代码：

<?php
function EWD_OTP_Display_Graph($OrderNumber) {
    global $wpdb;
    global $EWD_OTP_orders_table_name, $EWD_OTP_order_statuses_table_name;
    $Order = $wpdb->get_row($wpdb->prepare("SELECT * FROM $EWD_OTP_orders_table_name WHERE Order_Number='%s'", $OrderNumber));

    $Display_Graphic = get_option("EWD_OTP_Display_Graphic");
    $Statuses_Array = get_option("EWD_OTP_Statuses_Array");

    if (!is_array($Statuses_Array)) {$Statuses_Array = array();}
    foreach ($Statuses_Array as $Status_Array_Item) {if ($Status_Array_Item['Internal'] != "Yes") {$Filtered_Statuses_Array[] = $Status_Array_Item;}}
    foreach ($Filtered_Statuses_Array as $key => $Status_Array_Item) {
        if ($Order->Order_Status == $Status_Array_Item['Status']) {$CurrentStatus = $Status_Array_Item['Status']; $CurrentPercent = $Status_Array_Item['Percentage'];}
        elseif ($key == 0) {$StartingStatus = $Status_Array_Item['Status']; $StartingPercent = $Status_Array_Item['Percentage'];}
        elseif (($key+1) == sizeOf($Filtered_Statuses_Array)) {$EndingStatus = $Status_Array_Item['Status']; $EndingPercent = $Status_Array_Item['Percentage'];}
    }

    $Browser = get_user_browser();

    if ($Browser == "ie") {
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
        $ReturnString .= "<div class='ie-ewd-otp-empty-display ie-empty-graphic-" . $Display_Graphic . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-full-display ie-full-graphic-" . $Display_Graphic . " ie-ewd-otp-display-length-" . $DisplayLength . "'></div>";
            $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-initial-status'>" . $StartingStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status ie-ewd-otp-current-status-length-" . $DisplayLength . "' id='ie-ewd-otp-current-status'>" . $CurrentStatus . "</div>";
        $ReturnString .= "<div class='ie-ewd-otp-display-status' id='ie-ewd-otp-ending-status'>" . $EndingStatus . "</div>";
    } else {
        if (($Display_Graphic == "Default") or ($Display_Graphic == "Streamlined") or ($Display_Graphic == "Sleek")) {  
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
            $ReturnString .= "<div class='ewd-otp-empty-display'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL . "images/" . $Display_Graphic .".png' style='width: 100%'/></div>";
            $ReturnString .= "<div class='ewd-otp-full-display' style='width:" . $CurrentPercent . "%'>";
            $ReturnString .= "<img src='" . EWD_OTP_CD_PLUGIN_URL ."images/" . $Display_Graphic ."_Full.png' style='width: 100%; max-width: initial;'/></div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-statuses'>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status ewd-otp-current-status-length-" . $DisplayLength . "' id='ewd-otp-current-status'>" . $CurrentStatus . "</div>";
            $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
            $ReturnString .= "</div>";
            $ReturnString .= "<div class='ewd-otp-clear'></div>";
        } else {
            if ($StartingStatus == $CurrentStatus or $EndingStatus == $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent >= 75 && $EndingStatus != $CurrentStatus) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 55%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else if ($CurrentPercent <= 25) {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 5%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            } else {
                $ReturnString .= "<div id='ewd-otp-progressbar-" . $Display_Graphic . "'><div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'></div></div>";
                $ReturnString .= "<div class='ewd-otp-statuses'>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-initial-status'>" . $StartingStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: " . ($CurrentPercent-20) . "%'> " . $CurrentStatus . "</div>";
                $ReturnString .= "<div class='ewd-otp-display-status' id='ewd-otp-ending-status'>" . $EndingStatus . "</div>";
                $ReturnString .= "</div>";
            }
        }
    }
    return $ReturnString;
}
function get_user_browser() {
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $ub = '';
    if(preg_match('/MSIE/i',$u_agent))
    {
        $ub = "ie";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $ub = "firefox";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $ub = "safari";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $ub = "chrome";
    }
    elseif(preg_match('/Flock/i',$u_agent))
    {
        $ub = "flock";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $ub = "opera";
    }
    return $ub;
}
?>

谢谢！

Answer 1

我提出了一种完全不同的方法：专门创建条形图。

从HTML代码的角度来看，条形图是在显示或更新网页时包含的图像。但是，在这种情况下，这些图像不是静态图像文件;它们是由php脚本动态创建的。

优点：

无缝比例，实际值，不仅仅是步骤
增强功能，例如颜色，限制，网格。

缺点：

请求每次更新都发送到服务器。
图形图像无法预加载，每次都会传输。

创建下面显示的代码是为了显示资源图，但可以同样用于创建进度图。图表只是条形图。有几个参数可供图表使用。

参数

width：图表的宽度（像素）
高度：图表的高度（像素）
值：进度值（百分比）
limit1：第一个警告限制（100值*，百分数）
limit2：第二警告限（100值*，百分数）
grid：是否显示网格（＆＃39; true＆＃39;）或不显示（＆＃39; false＆＃39;或参数未设置）
颜色：颜色名称，（其中一个＆＃39;白色＆＃39;，＆＃39;黑色＆＃39;，＆＃39; lightgrey＆＃39;，＆＃39; darkgrey＆＃39;，＆＃39; ; midgrey＆＃39;，＆＃39; grey＆＃39;，＆＃39; yellow＆＃39;，＆＃39; orange＆＃39;，＆＃39; brown＆＃39;，＆＃39; cyan＆＃39; ，＆＃39; magenta＆＃39;，＆＃39; blue＆＃39;，＆＃39; darkblue＆＃39;，＆＃39; green＆＃39;，＆＃39; red＆＃39;，＆＃39; lightred＆＃39）
rgb：RGB表示法中的颜色值;覆盖颜色＆＃39;参数。
红色，绿色和蓝色值可以写为十进制值（例如255）或十六进制值（例如0xFF）。
红色，绿色和蓝色值由管道符（|）分隔。
例如：rgb = 255 | 0x33 | 0x70

（*）当资源消耗达到相应的金额时。

用法示例

您可以通过服务器端的php脚本生成<img .../>标记。你也可以设置＆＃39; src＆＃39;一个＆＃39; img＆＃39;的属性客户端的一个Javascript元素。

示例HTML代码：

<img id="progressbar" src="/bargraph.php?width=180&height=12&value=33&color=blue&grid=false" alt="Progress" />

示例Javascript代码：

var progress = 0;

function setProgressBar(id,progress) {
  var elem = document.getElementById(id);
  if (var) var.src = "/bargraph.php?width=180&height=12&value=" + progress + "&color=blue&grid=true";
}

// Maybe periodically do ...
progress += 5;
setProgressBar("progressbar", progress);
// ...

它看起来如何（带网格）：

代码（bargraph.php）

<?php
// We honor both request methods (GET/POST)
$params = array();
foreach($_REQUEST as $key => $value) $params[strtolower($key)] = $value;

// Assume default values if necessary
$wd = (empty($params{'width'})) ? 40 : (integer)$params{'width'};
$hg = (empty($params{'height'})) ? 8 : (integer)$params{'height'};
$vl = (empty($params{'value'})) ? 0 : (integer)$params{'value'};
$l1 = (empty($params{'limit1'})) ? 0 : 100-(integer)$params{'limit1'};
$l2 = (empty($params{'limit2'})) ? 0 : 100-(integer)$params{'limit2'};
$gr = (empty($params{'grid'})) ? 0 : ( (strtolower($params{'grid'})=='true') ? 1 : 0) ;

// Set grid parameters
define('numgrid',10);
if ($gr) {
    $xd = floor($wd / numgrid); $wd = $xd * numgrid;
    $wd0 = $wd;
    $wd -= 1;
} else {
    $xd = 0;
    $wd0 = $wd;
}

// Create the image
$img = imagecreatetruecolor($wd,$hg);

// Define color palette
$colors = array(
    'white' => imagecolorallocate($img,0xFF,0xFF,0xFF),
    'black' => imagecolorallocate($img,0,0,0),
    'lightgrey' => imagecolorallocate($img,0xE0,0xE0,0xE0),
    'darkgrey' => imagecolorallocate($img,0x66,0x66,0x66),
    'midgrey' => imagecolorallocate($img,0x99,0x99,0x99),
    'grey' => imagecolorallocate($img,0xC0,0xC0,0xC0),
    'yellow' => imagecolorallocate($img,0xFF,0xFF,0x00),
    'orange' => imagecolorallocate($img,0xFF,0xD7,0x00),
    'brown' => imagecolorallocate($img,0x66,0x66,0x00),
    'cyan' => imagecolorallocate($img,0x00,0xc0,0xc0),
    'magenta' => imagecolorallocate($img,0xc0,0x00,0x90),
    'blue' => imagecolorallocate($img,0x00,0x00,0xc0),
    'darkblue' => imagecolorallocate($img,0x00,0x51,0x8C),
    'green' => imagecolorallocate($img,0x00,0xc0, 0x00),
    'red' => imagecolorallocate($img,0xCC,0x00, 0x00),
    'lightred' => imagecolorallocate($img,0xFF,0x33, 0x33),
);
if (isset($params['rgb']) && !empty($params['rgb'])) {
    $col = explode('|',$params['rgb']);
    if (count($col)==3) {
        $colors['rgb'] = imagecolorallocate($img,$col[0],$col[1],$col[2]);
        $params['color']='rgb';
    }
}

// Evaluate colors 
$params['color']= strtolower($params['color']);
$lim1_color = $colors['yellow'];
$lim2_color = $colors['lightred'];
$color = (isset($params['color']) && isset($colors[$params['color']]))  
    ? $params['color']
    : 'cyan';
$active_color = $colors[$color];
if ($gr) {
    $inactive_color = $colors['grey'];
    $background_color = ($color=='midgreay') 
        ? $colors['lightgreay'] 
        : $colors['midgrey'];
    $delim_color = $colors['white'];
} else {
    $inactive_color =  $colors['white'];
    $background_color = $colors['grey'];
}


// Fill image with active / inactive colors
$x1 = 0; $y1 = 0;
if (($wd>3) && ($hg>3)) {
    imagefill($img,0,0,$background_color);
    imagefilledrectangle ($img,$x1+1,$y1+1,$wd0-2,$hg-2,$inactive_color);
} else {
    imagefill($img,0,0,$inactive_color);
}
$x2 = ceil(($wd0 / 100) * $vl);
if ($x2>0) { imagefilledrectangle ($img,$x1,$y1,$x2-1,$hg-1,$active_color); }
// Paint grid and limit bars
if ($gr) {
    for ($i = 0; $i <= (numgrid); $i++) {
        $x1 = ($i * $xd);
            imageline($img,$x1,0,$x1,$hg-1,$delim_color);
    }
}
if ($l1) { $x2 = ceil(($wd0 / 100) * $l1); imageline($img,$x2,0,$x2,$hg-1,$lim1_color); }
if ($l2) { $x2 = ceil(($wd0 / 100) * $l2); imageline($img,$x2,0,$x2,$hg-1,$lim2_color); }

// Avoid caching
header("Expires: Mon, 01 Jan 1999 00:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Always modified
header("Cache-Control: private, no-store, no-cache, must-revalidate"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0

// Send out, then destroy the image
header("Content-type: image/png");
imagepng($img);
imagedestroy($img);
?>

当然，您可以修改代码以更改条形图最终的显示方式。

PHP：更改代码的逻辑以切换图像

1 个答案:

参数

用法示例

代码（bargraph.php）