PHP_PHP チュートリアルに基づくクールな HTML5 インタラクティブ グラフ
- WBOYオリジナル
- 2016-07-13 09:46:39847ブラウズ
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://phpch
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://phpch
调试phpChart
最后，在结束之前，我要提一提phpChart的一个非常宝贵的特点。那就是它的内置调试功能。在其网站上，所有的在线例子http://phpch
要启用调试，只需添加以下代码行到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图表例子已经完整地罗列到以下这个页面中。运气好的话，你也许并不需要文档——就可以直接理解代码。
