wpDataTables を使用した大規模なデータ セットの視覚化: ハウツー ガイド

公開: 2023-05-03

大規模なデータ セットを視覚化することは大きな課題です。 それらを明確かつ説得力のある方法で提示することは、最も求められているデータ視覚化手法の 1 つです。 視聴者は、インタラクティブで、理解しやすく、応答性の高いものを必要としています。 高価なデータ ビジュアライゼーション ツールに多くの時間やお金を投資することなく、この種のビジュアライゼーションを作成する方法があります。

wpDataTables は、きっと気に入っていただける堅牢なデータ視覚化ツールです。 それを使ってあらゆる種類のグラフやチャートを作成します。 ビッグデータを処理し、それを聴衆が気に入るプレゼンテーションに変えることを専門としています.

この WordPress プラグインは、次のようなあらゆる種類の整理された階層データ形式を処理します。

  • CSV
  • エクセル
  • Google スプレッドシート
  • JSON
  • MySQL
  • PostgreSQL
  • XML

データ表現をカスタマイズするための組み込みのグラフおよびチャート エディターがあります。 標準として、次のようなさまざまなチャートを生成します。

  • 面グラフ
  • 棒グラフ
  • バブルチャート
  • 縦棒グラフ
  • ドーナツチャート
  • ゲージチャート
  • 折れ線グラフ
  • 円グラフ
  • 散布図

したがって、なぜwpDataTables がこれほど優れたツールであるかは明らかです。 この記事では、WordPress で大規模なデータ セットを視覚化し、Web サイトに公開するために使用する方法について説明します。

大規模なデータセットを視覚化するための wpDataTables の使用

wpDataTables のインストールと有効化

最初のステップは明らかです。開始するには、wpDataTables プラグインをインストールする必要があります。 WordPress プラグイン リポジトリにアクセスするだけで簡単に実行できます。

これを行うには、WordPress を開き、 Pluginsの下のAdd Newに移動します。 ここで wpDataTables を検索できます。 その後、画面の指示に従ってインストールとアクティベーションを完了してください。

データのインポート

インストールが完了すると、さまざまなソースから wpDataTables にデータをインポートできます。 データ インポートの選択肢には次のようなものがあります。

  • CSV
  • エクセル
  • Google スプレッドシート
  • JSON
  • MySQL クエリ
  • シリアライズされた PHP 配列
  • XML

wpDataTables に手動でデータを入力したり、プラグインをライブ データ ソースにリンクしたりすることもできます。

ページをロードするたびに自動的に更新されるテーブルを作成できるため、この機能は非常に便利です。 グラフィカル ユーザー インターフェイス (GUI) ツールを使用してカスタム クエリを生成することもできます。

データから新しいテーブルを作成する方法

wpDataTableに移動してCreate a tableをクリックすると、新しいテーブルを作成できます。 そこにオプションCreate a table linked to an existing data source が表示されます。 そのオプションをクリックし、 [次へ]をクリックします。

次の画面では、データのインポート方法に関するさまざまなオプションが表示されます。 それらのいずれかを選択する必要はありませんが、それらのいくつかは便利な場合があります。

[表示]で、 [レスポンシブ折りたたみ]オプションを選択できます。これは、画面が小さいデバイスで非常に便利です。 スクロールバーを編集したり、テーブル幅を制限したりできます。

[編集]タブには、フロントエンド編集のためのより多くのオプションがあります。 これには、クイック リンクの印刷、コピー、およびエクスポートが含まれます。 良い点は、変更をリアルタイムでプレビューできることです。 変更を加えるたびに、 [保存]または[適用]をクリックする必要があります。

大規模なデータセットを使用していますか? 問題なし。 サーバー側の処理があります

大量のデータ セットを処理し、大量のページを含む巨大なテーブルを作成する場合は、wpDataTables が必要な WordPress プラグインです。

wpDataTables は、大量のデータを簡単に処理できる強力で柔軟なプラグインです。 真剣に、私は数千行、さらには数百万行について話しているのです!

  • 大規模なテーブルがロードされるのを待つのにうんざりしていませんか?
  • 遅いソートとフィルタリングにうんざりしていませんか?
  • 大量のデータが原因でページがクラッシュすることを心配していますか?

もういや！ wpDataTables があなたをサポートします。 「サーバー側処理」と呼ばれる素晴らしい機能で構築されています。 この悪い子は、面倒な作業をすべて取り除き、MySQL サーバーに委任します。 それはあなたにとって何を意味しますか？ その意味は：

  • ページ読み込みの高速化
  • よりスマートなフィルタリングと並べ替え
  • 大規模なデータセットによるクラッシュはもうありません

それがどのように行われたか興味がありますか？ このビデオをチェックしてください:

さて、私はあなたが何を考えているかを知っています。 しかし、私に言わせてください、それはそれが得るのと同じくらい現実的です.

この機能は、大規模なデータ セットを処理し、スムーズなエクスペリエンスを求めるユーザー向けに設計されています。

適切なデータ視覚化の選択

データをインポートしたら、データの視覚化について考え始めることができます。 これを行うには、チャート作成ウィザードを開きます。 Create a Chartで wpDataTables を開くと、ウィザードが表示されます。

まず、後で見つけられるようにチャートに名前を付ける必要があります。 次に、4 つのチャート レンダリング エンジンのいずれかを選択します。

  1. Chart.js
  2. Google チャート
  3. ハイチャート
  4. Apexチャート

適切なデータ ビジュアライゼーションを選択することは非常に重要です。 グラフのさまざまなカテゴリは、さまざまな種類のデータにより適しています。

まず、データで何を強調したいかを考えてください。 そのメッセージは明確で目立つものでなければなりません。 次の 5 つの質問は、何をしたいのかを判断するのに役立ちます。

  • 異なるデータセットがある場合、それらの間の関係は何ですか?
  • データ分布を強調して外れ値を特定する必要はありますか?
  • 値を比較しますか? もしそうなら、異なるデータ ポイントを比較したいですか、それとも 1 つのポイントを経時的に追跡したいですか?
  • データセット内に興味深い傾向はありますか?
  • データの視覚化ステップはデータ分析の一部ですか?

これらの質問に対する答えがわかれば、プロジェクトに適した種類のチャートを選択する準備が整います。

グラフまたはチャートを編集したら、クリックして次の画面に進み、データ視覚化用のショートコードをコピーできます。

これで、ショートコードを Web サイトのコンテンツに貼り付ける準備が整いました。 それを保存し、フロントエンドをチェックして、それがどのように見えるかを確認してください。

wpDataTables 内には非常に特別なオプションがあります。 プラグインを削除しても、テーブルを保持できます。

プラグインを削除することを選択した場合でも、データベース内にテーブルが見つかります。

テーブルからチャートを作成する

wpDataTables を使用したデータ視覚化の作成について、もう少し詳しく見ていきましょう。 このプラグインを使用すると、あらゆる種類のデータ ソースから印象的でインタラクティブなグラフやチャートを作成できます。 Excel ファイル、CSV、MySQL、JSON などを使用できます。

テーブルを処理する準備ができたら、 [チャート]を選択し、 [新規追加]をクリックします。

プロジェクトにタイトルを付け、上記のようにレンダリング マシンを選択します。 Google Charts、Chart.js などから選択できます。 レンダリング エンジンにはそれぞれ特徴があり、それぞれに長所と短所があります。 試してみて、プロジェクトに最適なものを確認できます。

また、各レンダリング エンジンは、棒グラフ、縦棒グラフ、面グラフ、折れ線グラフなど、さまざまなカテゴリのグラフを提供します。 上部にドロップダウン メニューがあり、必要なデータ視覚化の種類を選択できます。

フォーマットとプレビュー

プラグインを使用すると、チャートやグラフを好きなようにフォーマットできます。 画面右側のパネルで、変更内容をすぐに確認できます。

各チャートまたはグラフ要素には、いくつかの書式設定カテゴリがあることに気付くでしょう。 最初のオプション セットでは、次の項目を調整できます。

  • 背景色
  • ボーダの色
  • 境界半径
  • ボーダー幅
  • グラフの高さ
  • チャート幅
  • グループチャート
  • レスポンシブ幅

もう 1 つの書式設定カテゴリはSeriesで、データ系列をカスタマイズできます。 Axesの下には、グラフの軸のレイアウトに関連するすべてのオプションがあります。 X 軸と Y 軸を互いに独立してカスタマイズできます。

次のカテゴリはエクスポートです。 Web サイトの訪問者がデータ視覚化ツールをさまざまな形式でダウンロードできるようにすることができます。

  • CSV
  • JPG
  • PDF
  • PNG
  • SVG
  • XLS

ツールバーカテゴリは、ApexCharts でのみ使用できます。 このオプションを使用すると、ユーザーは視覚化データを CSV、PNG、および SVG ベクター イメージ形式でダウンロードできます。

チャートまたはグラフの外観に満足したら、 [チャートの保存]ボタンをクリックして保存できます。 wpDataTables はそれを WordPress データベースに保存します。 この時点で、ショートコードも生成されます。

Web サイトまたはブログ投稿でグラフを公開する

古いバージョンでは、クラシック WordPress エディターが使用されています。 ただし、WordPress 5 以降を使用している場合にも使用できます。 そのためには、Classic Editor Plugin をダウンロードしてインストールする必要があります。

クラシック エディターでは、チャート用に wpDataTable が生成したショートコードを貼り付けることができます。 ショートコードの例は次のとおりです。

 [ wpdatatable id=22 ]

コードを正しい方法で貼り付けるには、次の手順に従います。

  1. 投稿に移動
  2. [新規追加]または[ページ]をクリックします
  3. 新規追加を選択
  4. ショートコードをエディターのコンテンツに貼り付けます
  5. ページまたはブログ投稿を更新または公開する

テーブルを公開する別の方法は、エディターで wpDataTables ボタンを使用することです。 ボタンをクリックして使用するグラフを選択し、 [挿入]をクリックします。

Gutenberg エディターは、コンテンツを管理するためのもう 1 つのツールです。 実際、チャートのオプションを増やすことができます。 必要なテーブルとその表示方法を選択でき、変数のプレースホルダーとエクスポート ファイル名を定義できます。

Divi Page Builder には wpDataTables の統合があります。 このページ ビルダーを使用すると、チャートや表を直接 Divi ユーザー インターフェイスに挿入できます。

wpDataTables を使用した大規模なデータ セットの視覚化に関する最後の言葉

ビッグ データから適切な情報を抽出するのは簡単ではありませんが、適切なデータ視覚化手法を使用すれば可能です。 この記事では、生データを魅力的なグラフやチャートに変換する方法を示しました。 大規模なデータセットを視覚化する必要がある場合、これは必要なスキルです。

このプラグインは非常に柔軟です。 試してみて、データの視覚化を使用して複雑なデータをさらに活用する方法を確認してください。 大規模なデータ セットを視覚化する際に、いくつかのパラメーターを変更するだけで、プレゼンテーションにどのような効果があるかがわかります。

大規模なデータ セットの視覚化に関するこの記事を楽しく読んだ場合は、以下もお読みください。

  • これらのデータ視覚化トレンドをお見逃しなく
  • 動的データ視覚化を使用してデータをより適切に提示する方法
  • オンラインで見つけられる最も印象的なインタラクティブ データ ビジュアライゼーション