PHP_PHP チュートリアルに基づくクールな HTML5 インタラクティブ グラフ

PHP ベースのクールな HTML5 インタラクティブ グラフ

HTML5 や JavaScript に関する深い知識がなくても、プロレベルの Web ベースのグラフを PHP で実装できます。

はじめに

最近、一連の PHP データ セットからグラフをすばやく作成する必要がありました。チャートはインタラクティブでユーザーフレンドリーで、ダウンロード可能である必要があります。 phpChart、pChart、Highcharts など、多数の PHP グラフ作成ソリューションを評価した結果、phpChart をツールとして選択することにしました。

背景

メインのバックエンド プログラマー として、私には JavaScript の使用法をゆっくり勉強する時間があまりなく (顧客は 24 時間以内にオンラインでチャートを見たいと考えています)、フロントエンド コーディングの高度な知識もありません。基本的に、フロントエンド プログラミングの経験がほとんどない PHP 開発者が、美しいチャートを迅速に開発できるようにしたいと考えています。

人気の PHP グラフ作成ライブラリである pChart を試してみました。生成されたチャートはダウンロード可能ですが、かなりきれいに見えますが、チャートはすべて静止画像です。ハイチャートが最良の選択のようです。グラフは見た目が美しく、アニメーション化されており、多くのカスタマイズ オプションがありますが、同時に非常に複雑でもあり、多くの JavaScript の知識が必要です。 Highcharts は PHP 用に設計されておらず、商用利用も無料ではありません。

phpChartの基本要素

私が phpChart で最も気に入っている点は、シンプルさと最小限のコードから始められることです。

phpChart Lite バージョンは、http://phpchart.org/downloads/ からダウンロードできます。ファイルをダウンロードし、Web サイトのルート ディレクトリに解凍します。

conf.phpを設定する

最初に行う必要があるのは、PhpChart クラス ライブラリの conf.php ファイルに変数 SCRIPTPATH を設定することです。この変数は、Web サーバー上の phpChart ライブラリの相対 URL または絶対 URL を表します。

リーリー

最も単純なグラフを作成します

リーリー

コンストラクターを呼び出してC_PhpChartX、最後にdraw()関数を呼び出します。

リーリー

これは開始するために必要なコードです。以下はレンダリングされた出力です。

これを私は最小限のコーディングと呼んでいます。プログラマーのチームが基礎に取り組んでいる場合、基礎を苦労して学ぶのは意味がありません。すべてのプログラマーができるだけ早く実行したいことの 1 つは、新しいライブラリまたはツールのセットからの複雑なドキュメントに没頭することです。

ところで、コンストラクターの 2 番目のパラメーターの名前は、チャートに固有のものである必要があります。 「simplest_graph」と入力しましたが、スペース以外の任意の文字列を入力できます。 1 ページに複数のグラフを含めることができるように、一意の値である必要があります。

タイトルを追加

ユーザーが何を見ているのかわかるように、グラフにタイトルを追加する必要があります。

リーリー

アニメーションを追加

pChart で実行できないことの 1 つはアニメーションです。 phpChart では、set_animate を呼び出して true 値を渡すだけで、アニメーションのサポートを利用できます。

リーリー

以上です。この時点で、グラフにはタイトルとアニメーションが表示されるはずです。完全なコードは次のとおりです:

リーリー

コードエッセンス

ブラウザでソースを表示すると、phpChart に jquery.js、jquery-ui、jqplot.js、jquery-ui.css などの多くの JavaScript および CSS ファイルが自動的に組み込まれていることがわかります。グラフはクライアント側の JavaScript を介してブラウザーに表示されますが、フロントエンドのコードは完全に PHP です。

人気がある理由は、phpChart が自動的に処理してくれるため、PHP 開発者として JavaScript について心配する必要がなくなったからです。以下は、ソース コードを表示したときに生成された JavaScript コード全体です。これは、前の 4 行の PHP コードの結果です。

リーリー

お気づきかと思いますが、「simplest_graph<span style="color: #111111; Segoe UI', Arial, sans-serif;">」 <code>simplest_graph<span style="color: #111111; font-family: 'Segoe UI', Arial, sans-serif;">”</span>被用作JavaScript变量的一部分，如 _simplest_graph_plot_properties code> は、jqplot オブジェクトを表す _simplest_graph_plot_properties などの JavaScript 変数の一部として使用されます。先ほど、ネーミングはユニークでなければならないと述べたのはこのためです。

さらに、PHP データ配列は自動的に JavaScript 配列に変換されるため、次の PHP 配列:

リーリー

JavaScript配列になります:

リーリー

レンダラータイプを変更する

PhpChart は、棒グラフ、折れ線グラフ、スタック ブロック チャート、 メーター チャート、およびその他の種類のチャートをサポートします。レンダラーのサポート:

• バーレンダラー

• ベジェ曲線レンダラー

• ブロックレンダラー

• バブルレンダラー

• キャンバス軸ラベルレンダラー

• CanvasAxisTickRenderer

• カテゴリ軸レンダラー

• DateAxisRenderer

• ドーナツレンダラー

• 強化されたLegendRenderer

• FunnelRenderer

• LogAxisRenderer

• MekkoAxisRenderer

• MekkoRenderer

• MeterGaugeRenderer

• OHLCRenderer

• PyramidAxisRenderer

• PieRenderer

如果你不指定类型的话，默认图表类型是折线图。要更改图表类型，需要调用set_series_default函数。例如，将上面的例子更改为饼图

<ol class="dp-j"><li class="alt"><span><span>$pc->set_series_default(array(</span><span class="string">'renderer'</span><span>=></span><span class="string">'plugin::PieRenderer'</span><span>)); </span></span></li></ol>

请注意，我用的是phpChart企业版。 phpChart精简版只支持折线图。

数组和命名约定

这里还有一些值得注意的地方。首先，phpChart函数中使用的几乎所有参数是一个数组，不是全部，但几乎所有的都是。只需记住这一点，就能避免 调试时的大量头痛问题后面我将简要地覆盖调试功能）。其次，渲染器在phpChart中被称为“插件”，故而你必须像这样传递 “plugin::PieRenderer”，中间双冒号。对于自定义JavaScript中，用 “js::yourJavascriptFunctioName”。

高级phpChart：自定义JavaScript

到目前为止，所有我展示的都是PHP。在大多数情况下，对于简单的PHP函数调用，phpChart完全能做得很好。为了充分利用 phpChart，你或许会想要使用自定义JavaScript。例如，你可以用phpChart从JavaScript函数和外部源加载数据。

下面的sineRenderer是一个自定义JavaScript函数，用于定义从一组随机数显示正弦值。然后传递给set_data_renderer函数。

PHP：

<ol class="dp-j"><li class="alt"><span><span>$data1 = array(); </span></span></li><li><span>$pc = <span class="keyword">new</span><span> C_PhpChartX(array($data1),</span><span class="string">'basic_chart_4'</span><span>); </span></span></li><li class="alt"><span>$pc->set_title(array(<span class="string">'text'</span><span>=></span><span class="string">'Basic Chart with Custom JS'</span><span>)); </span></span></li><li><span>$pc->set_data_renderer(<span class="string">"js::sineRenderer"</span><span>); </span></span></li><li class="alt"><span>$pc->add_plugins(array(<span class="string">'pointLabels'</span><span>)); </span></span></li><li><span>$pc->set_animate(<span class="keyword">true</span><span>); </span></span></li><li class="alt"><span>$pc->draw(); </span></li><li><span> </span></li><li class="alt"><span>JavaScript： </span></li><li><span> </span></li><li class="alt"><span>sineRenderer = function() { </span></li><li><span>    var data = [[]]; </span></li><li class="alt"><span>    <span class="keyword">for</span><span> (var i=</span><span class="number">0</span><span>; i<</span><span class="number">13</span><span>; i+=</span><span class="number">0.5</span><span>) { </span></span></li><li><span>      data[<span class="number">0</span><span>].push([i, Math.sin(i)]); </span></span></li><li class="alt"><span>    } </span></li><li><span>    <span class="keyword">return</span><span> data; </span></span></li><li class="alt"><span>  }; </span></li></ol>

想要知道set_data_renderer函数的更多内容可点击这里：http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.html

导出图表到图片

刚开始的时候，对此我很困扰，因为我不知道如何导出图表。事实证明，phpChart图表可以导出为可下载的图片，但这个过程并没有很好的记录下来。我发现添加以下代码到所有页面的底部，就可以扭转乾坤：

<ol class="dp-j"><li class="alt"><span><span><script type=</span><span class="string">"text/javascript"</span><span> </span></span></li><li><span>  src=<span class="string">"http://www.codeproject.com/phpChart/js/showjs.js"</span><span>></script> </span></span></li></ol>

下载showjs.js：http://phpchart.org/phpChart/js/showjs.js

调试phpChart

最后，在结束之前，我要提一提phpChart的一个非常宝贵的特点。那就是它的内置调试功能。在其网站上，所有的在线例子http://phpchart.org/examples/）都有调试可以启用生动的演示和两个清晰的可方便移植下面代码的选项卡——分别是JavaScript和PHP。

要启用调试，只需添加以下代码行到conf.php文件：

<ol class="dp-j"><li class="alt"><span><span>define(</span><span class="string">'DEBUG'</span><span>, </span><span class="keyword">true</span><span>); </span></span></li></ol>

最后的思考

PhpChart的一个主要好处是，通过使用这个工具，PHP程序员可以实现专业级的基于Web的图表——而无需深入了解HTML5和JavaScript知识。

如果你像我一样，也是前端编程的门外汉，但同样需要生成交互式的Web图表，那么你或许会喜欢phpChart。关于phpChart的HTML5图表例子已经完整地罗列到以下这个页面中。运气好的话，你也许并不需要文档——就可以直接理解代码。

---

---

http://www.bkjia.com/PHPjc/1031255.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1031255.htmlTechArticle基于PHP的超炫酷HTML5交互式图表 用PHP实现专业级的基于Web的图表，而无需深入的HTML5和JavaScript知识。 介绍 最近，我需要从一组PHP数据组快...