Question

我有一个包含简单十进制值的数组，所以我想要的是我使用SVG Polyline创建一个LINECHART，所以我想得到某种PHP插件或一段可以生成X＆amp;的代码。 Y从一个简单的十进制值数组中为我指点。

我已经尝试了很多JS插件，他们肯定会更好地生成它，但后来......！

注意：我不能使用像 d3.js 这样的JS插件，不幸的是我使用的是WKHTMLTOPDF Linux Binary，它似乎与JS Charts不兼容。

值的数组类似于：

[14,18,4,19,23,34,16,25,5,9,13,15,16]

这是我的演示SVG折线：

<svg viewBox="0 0 500 100" style="width: 710px;height: 300px">
  
  <polyline
     fill="none"
     stroke="rgb(125, 207, 108)"
     stroke-width="4"
     points="
       00,120
       20,60
       40,80
       60,20
       80,80
       100,80
       120,60
       140,100
       160,90
       180,80
       200, 110
       220, 10
       240, 70
       260, 100
       280, 100
       300, 40
       320, 0
       340, 100
       360, 100
       380, 120
       400, 60
       420, 70
       440, 80
     "
   />
  
</svg>

更新： 感谢@Paul LeBeau 我现在可以生成线图，但是您也可以将x轴值添加到下方图表上的每个点。那将是非常好的，我如何伸展图表覆盖整个页面：

x轴下方的值应如2016年7月等显示：

以下是新数据的数组：

$data=["Jul 2014"=>[16],
               "Aug 2014"=>[14],
               "Sep 2014"=>[18],
               "Oct 2014"=>[4],
               "Nov 2014"=>[19],
               "Dec 2014"=>[23],
               "Jan 2015"=>[34],
               "Feb 2015"=>[16],
               "Mar 2015"=>[25],
               "Apr 2015"=>[5],
               "May 2015"=>[9],
               "Jun 2015"=>[13],
               "Jul 2015"=>[15]];

以下是Lincharts的PHP代码：

$values = [14,18,4,19,23,34,16,25,5,9,13,15,16];

$xOrigin = 90;   // Position of the start (left) of the X axis
$yOrigin = 100;  // Position of the start (bottom) of the Y axis
$xScale = 20;    // Scale for the X axis
$yScale = 2.5;   // Scale for the Y axis

// Get the max value in the $values array so we know how tall to make the Y axis
$yMax = max($values);

$linechart = "";

  $linechart .= '<g transform="translate('.$xOrigin.','.$yOrigin.')" fill="none" stroke="grey">';
    $linechart .= '<line id="xaxis" x1="0" y1="0" x2="'.$xScale*(count($values)-1).'" y2="0" />';
    $linechart .= '<line id="yaxis" x1="0" y1="0" x2="0" y2=".'-$yScale*$yMax.'" />';

  $points = "";
   for ($i = 0; $i < count($values); $i++) {
          if ($i != 0)
            $points .= ", ";
          $points .=($i * $xScale) . "," . ($values[$i] * -$yScale);
        }


$polyline = "";
$polyline .= '<polyline
      stroke="rgb(125, 207, 108)"
      stroke-width="4"
      points="'.$points.'"/>
  </g>';


$page6 = <<<EOD
<svg viewBox="0 0 500 100" style="width: 710px;height: 300px;position: absolute;top: 3135px;left: 130px;">

      $linechart;

      $polyline

    </svg>
EOD;

以下是报告的链接，其中包含LINECHART，我将其嵌入：http://huntedhunter.com/venue_report/

Answer 1

这是一些用X和Y轴绘制简单折线图的PHP代码。

$values = [14,18,4,19,23,34,16,25,5,9,13,15,16];

$xOrigin = 90;   // Position of the start (left) of the X axis
$yOrigin = 100;  // Position of the start (bottom) of the Y axis
$xScale = 20;    // Scale for the X axis
$yScale = 2.5;   // Scale for the Y axis

// Get the max value in the $values array so we know how tall to make the Y axis
$yMax = max($values);

?><svg viewBox="0 0 500 100" style="width: 710px;height: 300px">

  <g transform="translate(<?=$xOrigin?>, <?=$yOrigin?>)" fill="none" stroke="grey">
    <line id="xaxis" x1="0" y1="0" x2="<?= $xScale*(count($values)-1) ?>" y2="0" />
    <line id="yaxis" x1="0" y1="0" x2="0" y2="<?= -$yScale*$yMax ?>" />

    <polyline
      stroke="rgb(125, 207, 108)"
      stroke-width="4"
      points="<?php

        // Loop through all the entries in the $values array
        // Echo "x,y" coordinates to the page to fill in the
        // points attribute of the <polyline> element.
        for ($i = 0; $i < count($values); $i++) {
          // If this is not the first x,y pair, then output a
          // comma to separate one x,y pair from the next
          if ($i != 0)
            echo ", ";
          // Output a single x,y pair.  Each x and y values are
          // multiplied by a scale factor. $yScale is negative because
          // in an SVG y coordinates increase down the page, but we want larger
          // Y to go up the page.
          echo ($i * $xScale) . "," . ($values[$i] * -$yScale);
        }

      ?>"/>
  </g>

</svg>

对某些SVG内容的解释：

<g transform="translate(<?=$xOrigin?>, <?=$yOrigin?>)" fill="none" stroke="grey">

此<g>元素是SVG组。组只是指定所有组子级继承的某些属性的方法。因此，我们可以将fill设置为无，并将stroke颜色设置为灰色，并且我们不必为每个孩子指定颜色。

transform="translate()"属性会导致群组在$xOrigin，$yOrigin位置的页面上移动。我们这样做是为了简化下面的图表。我们可以创建我们的图形和轴，就像它们基于（0,0）一样。然后转换将所有内容转移到页面上的最终位置。

<line id="xaxis" x1="0" y1="0" x2="<?= $xScale*(count($values)-1) ?>" y2="0" />

形成X轴的线。从(0,0)到(<no. of values>, 0)。

<line id="yaxis" x1="0" y1="0" x2="0" y2="<?= -$yScale*$yMax ?>" />

形成Y轴的线。从(0,0)到(0, <maximum Y value>)。

如何在php中从数组中绘制折线？

1 个答案: