jQueryでのFusionChartsのドリルダウンに関するチュートリアル

公開: 2022-03-11

データを視覚化すると読みやすくなります

データ分析を扱う場合、ほとんどの企業はMSExcelまたはGoogleスプレッドシートに依存しています。 これらは強力なツールですが、傾向に気付くのは難しく、スプレッドシートデータの大きな行からはほとんど意味がありません。 この方法で提示されたデータを処理することはあまり面白くありませんが、そのデータに視覚化を追加すると、管理が容易になります。これが今日のチュートリアルのトピックです。jQueryを使用してインタラクティブなグラフを作成します。

スプレッドシートデータを扱うのは退屈です。

スプレッドシートデータの行から傾向に気付くのは難しいですが、視覚化を追加すると...
つぶやき

このプロジェクトでは、FusionChartsのJavaScriptチャートライブラリを使用します。これは、90以上のチャートの大規模なライブラリを提供し、すべてのブラウザと互換性があり、操作が非常に簡単だからです。 また、jQuery専用のプラグインを提供しており、作業が簡単になります。

まず、FusionChartsのコアJavaScriptライブラリとそのjQueryチャートプラグインを使用して基本的なチャートを作成し、次にドリルダウン機能を追加します。 ドリルダウンを使用すると、データプロットをクリックして、あるグラフから別のグラフに移動できます。

「データプロット」という用語は文脈に応じたものです。 縦棒グラフの縦棒、折れ線グラフの線、円グラフの円スライスを指します。 親グラフのデータプロットをクリックすると、子グラフが表示され、相対データが1レベル深く表示されます。

親チャートのデータプロットをクリックすると、子チャートが表示されます。

親チャートのデータプロットをクリックすると、子チャートが表示されます。

FusionChartsを理解する

チュートリアルを開始する前に、FusionChartsの基本的な構造について説明しましょう。 すべてのチャートは、次の重要な要素で構成されています。

  • キャプション：チャートのタイトル。 チャート化されているものを説明します。
  • サブキャプション：追加のグラフ情報を指定するキャプションの下のテキスト。多くの場合、データが収集された時間枠を示します。
  • 凡例：これは、チャート上の各データプロットの記号を表示します。 特定のプロットは、それぞれの凡例アイコンをクリックして有効または無効にできます。
  • データプロット：これらはチャート上のデータ表現です。 データプロットは、縦棒グラフの列、折れ線グラフの線、または円グラフの円グラフにすることができます。
  • ツールチップ：データプロットにカーソルを合わせると表示されるテキストで、特定のデータプロットに関する追加情報を伝えるために使用されます。

FusionChartの断片。

ドリルダウンチャートの作成

始める前に、このチュートリアルで作成するチャートのスクリーンショットを次に示します。 ここでJSFiddleを表示するか、GitHubリポジトリでプロジェクトの完全なソースコードにアクセスできます。

このチュートリアルの最後のjqueryプロジェクトのプレビュー。

ドリルダウンチャートを作成するプロセスを5つのステップに分割したので、始めましょう。

ステップ1：JavaScriptファイルを含めてチャートコンテナを作成する

まず、 <script>タグを使用して、プロジェクトが依存しているすべてのJSファイルを含める必要があります。 ページがまだ存在しない場合は、空白のHTMLドキュメントを作成し、 <head>セクションに以下のファイルを含めてください。 ここで、次の4つのファイルが必要です。

  • 縮小されたjQuery
  • FusionChartsのメインJSライブラリ（ fusioncharts.jsとfusioncharts.charts.jsの両方を含む）
  • FusionChartsのjQueryプラグイン

<head>セクションは次のようになります。

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

すべての依存関係が含まれているので、グラフのコンテナ<div>を作成し、次のHTMLコードを使用してページに埋め込みます。

 <div>drill-down chart will load here</div>

これで、コード内でjQueryの$セレクターを使用して選択できます。

 $("#drill-down-chart")

注：ページに複数のグラフがある場合は、一意のidを持つグラフごとに個別のコンテナーが必要になります。

データを視覚化すると読みやすくなります。

ステップ2：データの取得と構造化

FusionChartsはJSON形式とXML形式の両方のデータを受け入れますが、Webアプリ間でのデータ交換の標準形式になっているため、JSONを使用することを選択しました。 基本チャートのJSONデータ配列には、各データプロットのオブジェクトが含まれ、各データプロットオブジェクト内で、それぞれのラベルと値を定義します。 その構造は次のようになります。

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

ドリルダウンチャートをプロットすると、そのJSONはより複雑になります。 親チャートと子チャートの間のリンクには、データ配列の各オブジェクト内にもう1つのkeyとvalueのペアが必要です。 新しいキー（当然のことながら、 linkと呼ばれます）には、親データプロットがクリックされたときに取得する子グラフのIDが含まれます。 子チャートidを定義するための形式は、 newchart-dataFormat-childIdです。 JSONを使用しているため、リンクするものはすべてnewchart-json-childIdようになります。 チャートの定義方法は次のとおりです。

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

ステップ3：チャートデータの挿入

データの準備ができたら、jQueryプラグインが提供するinsertFusionChartsメソッドを使用して、ページにグラフを挿入します。

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

上記のコードスニペットを分解してみましょう。

  • typeは、プロットする親チャートのタイプを定義します。 この場合、 column2dです。 FusionChartsライブラリのすべてのチャートには、一意のエイリアスがあります。 プロットするチャートのエイリアスは、FusionChartsのチャートリストページにあります。
  • idは、グラフの一意のIDを設定します。これは、グラフを含む<div>要素のIDと混同しないでください。 チャートのidは、イベントハンドラーを適用してメソッドを呼び出すためのチャートを選択するために使用されます。 これをステップ5で利用します。
  • widthとheightさは、チャートの寸法をピクセルまたはパーセンテージで設定します。 100％幅は、チャートがコンテナ幅全体を占めるように指示します。
  • dataFormat属性を使用してデータ形式を定義します。 この例ではJSONを使用していますが、XML URLなど、他の受け入れ可能なデータ形式もあります。 データ形式の詳細については、FusionChartsの公式ドキュメントページを参照してください。
  • dataSourceにはグラフの実際のコンテンツが含まれ、その中のchartオブジェクトには、キャプションやサブキャプションなどのグラフの構成オプションが含まれます。 data配列はステップ2で作成したので見覚えがあるはずです（プロットされるデータが含まれています） linkedDataには子グラフ（親グラフのデータプロットをクリックした後に表示されるグラフ）のコンテンツが含まれます。
関連：フリーランスのビッグデータアーキテクトの上位3％を雇います。

ステップ4：子グラフのリンクされたデータ配列を作成する

親グラフを定義したので、次は各データプロットの子グラフを作成します。これは、親グラフの作成と非常によく似たプロセスです。 'insertFusionCharts'メソッドで作成されたlinkedData配列は、子チャートごとに個別のオブジェクトを定義します。 最初の子グラフのデータは次のようになります。

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

idは、手順2で定義した個々の子グラフのIDですlinkedChartは、そのグラフの実際のコンテンツが含まれているという点で、手順3のdataSourceに似ています。 チャートオブジェクトの内部には他にも多くの属性があります。これについては、後のセクション「チャート属性を使用したデザインの改善」で詳しく説明します。

ステップ5：カスタムドリルダウン構成

多様なチャートタイプ

これまでのところ、サンプルコードには、同じチャートタイプを共有する親チャートと子チャートの両方があります。 別のグラフタイプ（たとえば、列から円へ）にドリルダウンする場合は、 fusionchartsrenderedイベントをバインドします。

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

上記のコードでは、 fusionchartsrenderedイベントはconfigureLinkメソッドを呼び出します。このメソッドは、すべての子チャートのタイプとオーバーレイボタンオプションを定義します。 子チャートごとに個別のチャートタイプを指定することもできます。 configureLinkメソッドには多くのオプションがあります。そのため、FusionChartsのAPIリファレンスドキュメントを確認すると便利な場合があります。

異なるDivでのチャートのレンダリング

あなたができるもう一つのクールなことは、親と同じものではなく、別のコンテナで子チャートをレンダリングすることです。 このために、親チャートコンテナの後に別のHTML <div>コンテナを定義し、以下に示すようにそのIDをrenderAt属性に渡します。

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

renderAt属性に指定された値は、子チャートがレンダリングされる<div>のIDを指定します（ chart-container2 ）。

チャート属性による設計の改善

このチュートリアルに従うと、機能チャートが表示されますが、そのままにしておくと多少見苦しくなります。 より魅力的なプレゼンテーションを行うには、表面的な「チャート属性」を利用する必要があります。 チャート属性はchartオブジェクト内で定義され、レンダリングオプションをカスタマイズするために使用されます。 これらの主要な構成可能な属性を確認するときは、FusionChartsの説明図を参照すると便利な場合があります。

  • paletteColorsカラーは、データプロットの色を定義します。 ここで単一の色を指定すると、すべての列がその色になります。 複数の色を指定すると、最初の列が最初の値を取り、2番目の列が2番目の値を取ります。
  • plotSpacePercentは、列間のスペースを制御します。 これのデフォルト値は20（値はintですが、単位はパーセンテージです）であり、許容範囲は0〜80です。 値がゼロの場合、列は束になり、互いにくっつきます。
  • baseFontは、チャートのフォントファミリを定義します。 好きなフォントを使用できます。 チャートではGoogleのOpenSansを使用しました。 チャートで使用するには、HTMLページに外部フォントファイルを含めるだけです。
  • plotToolTextを使用すると、ツールチップをカスタマイズできます。 $labelや* $dataValueなどのマクロを使用すると、 <div>内から特定のデータプロットに関する特定の情報を表示し、インラインCSSを使用してその<div>のスタイルを設定できます。 これが私たちの例で行ったことです：
 "plotToolText": "<div>$label: $dataValue</div>"
  • themeを使用すると、チャートオブジェクトを多数のチャート属性で乱雑にする代わりに、別のファイルでチャート属性を定義し、ここで一度適用することができます。 このチュートリアルのテーマファイル（ toptal.js ）は、プロジェクトのGitHubリポジトリのJSフォルダー内にあります。

これから説明するのはこれだけですが、グラフには100を超える属性があるため、さらに詳しく調べたい場合は、FusionChartsのグラフ属性ページにアクセスして特定のグラフの種類を検索してください。

その他のFusionChartsとjQueryリソース

jQueryを使用してドリルダウンチャートを作成する際の最も重要な要素について説明しましたが、自分でそれを実行しようとすると、助けが必要になる可能性があります。 その瞬間、ここにいくつかの追加のリソースがあります：

  • jQueryチャートプラグイン：インスピレーションについては、公式のjQueryチャートプラグインページにアクセスして、いくつかの実際の例を確認してください。
  • ドキュメント：何かを理解できない場合は、ドキュメントが最初に確認する必要があります。 jQueryプラグインとドリルダウンチャート（リンクチャートとも呼ばれます）の便利なリンクは次のとおりです。
  • デモ：すべてのチャートライブラリは、その機能を紹介するライブサンプルを提供しており、FusionChartsも例外ではありません。 800以上のライブサンプルのデモギャラリーにアクセスしてください。アイデアが必要な場合は、完全なソースコードが含まれています。 あなたが作ろうとしているものは何でもすでに利用可能である可能性が高いです。 ゼロから始める必要はありません。 フィドルをフォークしてそこから進んでください！
  • その他の拡張機能：バニラJavaScriptまたはjQueryを使用しない場合は、このページでFusionChartsが提供するその他のプラグインとラッパーを調べることができます。 Angular、React、Java、ASP.NETなどのさまざまなライブラリやフレームワーク専用のプラグインがあります。

PS：私は下のコメントセクションでぶらぶらしているので、私の記事についての質問があれば遠慮なく投稿してください。 喜んでお手伝いさせていただきます！

関連：予測的ソーシャルネットワーク分析のためのデータマイニング