PHPで配列からポリラインを描くには？

Question

私は単純な10進値の配列を持っているので、SVG Polylineを使用してLINECHARTを作成していますので、PHPプラグインやコードを生成してXを生成したいと思います。& Y座標のポイントシンプルな10進値の配列から取得します。

私はJSプラグインでたくさん試しましたが、確かにそれをよりよく生成していましたが...！

注：JSプラグインを使用することはできませんd3.js残念ながら私はJS Chartsと連携していないようなWKHTMLTOPDF Linux Binaryを使用しています。

値の配列としてのようになります。ここでは

[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>

UPDATE：@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コードであるとして：としてここ

は、新たなデータの配列である

ここでは10

$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; 

として、私はそれを埋め込むい折れ線グラフを持っているレポートのリンクされています。ここでは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をnoneに、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>)まで