0

私が取り組むことを選択した学校のプログラミング プロジェクトの一部では、ユーザー データに基づいて、PHP を使用して棒グラフを生成する必要があります。私の先生は、私がオープンソースのクラスや他人のコードを使用してはならないことを明確にしました。彼はまた、私が CSS を使用してグラフを表示することを禁じており、それは不可能だと部分的に主張しています (私はオンラインで方法を見てきました)。

Jpchart や Pchart などの一般的な PHP グラフ作成クラスを簡単に見てみましたが、それらはすべてかなり複雑で、何万行ものコードが含まれているように見えました。

確かに jpeg を生成するためのクラスを書かなければならないこともかなり複雑に違いありません。

誰か提案はありますか、それとも私が腰を下ろして、これらの期待は非現実的であると彼に伝えるべきですか?

4

5 に答える 5

1

CSSに関する彼の意見は間違っており、CSSが発明された日から、単純な棒グラフについて話しているだけでは間違っています。<div>いくつかのタグと少量のCSSを使用して棒グラフを作成するのは簡単です。

彼はおそらく彼が理解している特定の解決策を探しています-多分HTMLテーブル？（私は本当に望んでいません）あるいは、PHPのGDライブラリを使用して画像を生成するかもしれません。

もし私があなたなら、SVGのような珍しい解決策を選んでそれを行います。SVGでグラフを生成し、ブラウザに出力します。彼の基準を満たしていますが、彼の「禁止」オプションを使用していません。（ただし、このオプションを選択する前に、教師がSVG [IE8より新しい]をサポートするブラウザーを使用していることを確認してください！）

于 2013-01-10T16:23:14.493 に答える
0

基本的なタスクに分解すれば、それは簡単です。グラフの作成方法について、学校で最初に教えられた方法を思い出してください。

  • グラフのサイズ（つまり、用紙サイズ）から始めます
  • それぞれが必要なスペースを計算できるように、描画する必要のあるバーの数を知っています
  • データの最大値と最小値がわかっているので、スケールを簡単に計算できます

残りはキーとタイトルだけです！

于 2013-01-10T16:23:57.087 に答える
0

それほど難しいことではありません。phpの画像関数を見てください。gdまたはimagemagick。

特に矩形関数はあなたにとって興味深いでしょう。

于 2013-01-10T16:13:32.470 に答える
0

CSSの使用を禁止することは、彼の完全なやり方です。GDlib 関数を使用することを除いて [これは演習のポイントではないと思います]、1x2 セル テーブルを作成し、バーの値に従ってセル幅を設定することもできますが、CSSがないと多少面倒です。 . Dickbag 教授の怒りを避けるために、すべてに HTML 属性を設定する必要があります。

あなたのインストラクターは、これが CSS では不可能であることについて完全に間違っています。

彼が怒っているだけの年寄りの首ひげである場合、彼はおそらく次のようなものを望んでいます。

Tom:   |****      | 43%
Dick:  |***       | 27%
Harry: |********  | 82%

つまり、1981 年に DEC PDP で戻ったようなものです。

編集

講師はグラフをイメージ形式で表示するように指示したので、 GD ライブラリ関数を使用する必要があります。のドキュメント ページのサンプル コードは、imagefilledrectangle()開始するには十分すぎるはずです。

<?php
// Create a 55x30 image
$im = imagecreatetruecolor(55, 30);
$white = imagecolorallocate($im, 255, 255, 255);

// Draw a white rectangle
imagefilledrectangle($im, 4, 4, 50, 25, $white);

// Save the image
imagepng($im, './imagefilledrectangle.png');
imagedestroy($im);
于 2013-01-10T16:18:16.057 に答える
0

html/css によるグラフ作成は完全に可能です。

棒グラフを作成するとしましょう。最小 + 最大の計算を行い、両方の高さを定義することから始めます。その後、他のすべての値を取得し、それらの高さを決定します (最小/最大の割合)。その後、私の心には2つの選択肢があります。1、HTMLをセル付きのテーブルとしてレンダリングし、高さ/幅を指定して明示します。または、id とクラスを使用して一連の div をレンダリングし、その場で css を作成し (style 属性を使用してインライン化するか、css を script タグに動的に書き込みます)、以前に決定した内容に基づいて css で高さを設定します。

D3jsライブラリを使用したコードを次に示します。この方法論は非常に健全です.jsではなくphpを使用して、同様の方法でコードを実行してください.

他の例を見たい場合: html/css チャートの例をいくつか示します。pchartsは、GD php 拡張機能を使用して jpg/png 形式のチャート画像を生成する優れたライブラリです。その場で画像を生成することを計画している場合、このライブラリは良いインスピレーションを提供するはずです。

更新 私は助けることができませんでしたが、php/cssの例を作成しました:

<html>
<head>
    <style type="text/css">
        .bar {
            background: #660000;
            color: #fff;
            height: 20px;
            width: auto;
            min-width: 2px;
            clear: both;
            margin-bottom: 5px;
            padding: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<?php

    //array of values
    $vals = array(
        'git' => 9001, 
        'svn' => 4213, 
        'bitkeeper' => 7391,
        'mercurial' => 2114,
        'cvs' => 806, 
    );
    //minimim and maximum
    $min = 1;
    $max = 200;

    //calculate scale, draw, and loop
    foreach ($vals as $key => $val) {
        $scale = (2 * ($val-$min)/($max-$min))*8;
        echo('<div class="bar" style="width: '.$scale.'px" title="'.$key.' = '.$val.'">'.$key."</div>");
    }

?>
</body>
</html>
于 2013-01-10T16:19:53.003 に答える