データサイエンスとデータベース

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

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

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

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

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

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

Pythonを使用したTwitterデータ分析

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

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

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

FusionChartsを理解する

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

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

FusionChartの断片。

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

始める前に、このチュートリアルで作成するグラフのスクリーンショットを次に示します。あなたはJSFiddleを見ることができますここにまたは、私のプロジェクトの完全なソースコードにアクセスします GitHubリポジトリ。

このチュートリアルのプレビュー

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

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

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

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

私たちのセクションは次のようになります。

drill-down chart will load here

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

Javaでメソッドをテストする方法

$

これで、jQueryの$('#drill-down-chart') を使用して選択できます。コード内のセレクター：

id

注意： ページに複数のグラフがある場合は、グラフごとに一意の'data': [{ 'label': 'Q1', 'value': '850000', }, { 'label': 'Q2', 'value': '2070000', },... // more data objects ] を持つ個別のコンテナが必要になります。

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

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

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

key

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

insertFusionCharts

ステップ3：グラフデータの挿入

データの準備ができたら、$('#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 ] } }) を使用してページにグラフを挿入します。 jQueryプラグインによって提供されるメソッド：

type

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

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

関連： フリーランスのビッグデータアーキテクトの上位3％を雇います。

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

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

id

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

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

多様なチャートタイプ

これまでのところ、サンプルコードには、同じチャートタイプを共有する親チャートと子チャートの両方があります。別のグラフタイプ（列から円など）にドリルダウンする場合は、$('#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' } }); }); をバインドします。イベント。

cプログラミング言語を作成したのは誰ですか

fusionchartsrendered

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

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

あなたができるもう一つのクールなことは、子チャートをその親と同じものではなく、別のコンテナにレンダリングすることです。このために、親チャートコンテナの後に別のHTMLコンテナを定義し、そのIDを$('#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

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

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

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

plotSpacePercentデータプロットの色を定義します。ここで単一の色を指定すると、すべての列がその色になります。複数の色を指定すると、最初の列が最初の値を取り、2番目の列が2番目の値を取ります。
baseFont列間のスペースを制御します。これのデフォルト値は20（値はintですが、単位はパーセンテージです）であり、許容範囲は0〜80です。値がゼロの場合、列が集まって互いにくっつきます。
plotToolTextチャートのフォントファミリーを定義します。好きなフォントを使用できます。チャートではGoogleのOpenSansを使用しました。チャートで使用するには、HTMLページに外部フォントファイルを含めるだけです。
$labelツールチップをカスタマイズできます。 $dataValueなどのマクロを使用するおよび* 'plotToolText': ' $label: $dataValue ' を使用すると、aの内部から特定のデータプロットに関する特定の情報を表示し、インラインCSSを使用してスタイルを設定できます。これが私たちの例で行ったことです：

theme

toptal.jsチャートオブジェクトを多数のチャート属性で乱雑にする代わりに、別のファイルでチャート属性を定義し、ここで一度適用することができます。このチュートリアルのテーマファイル-
-は、プロジェクトのGitHubリポジトリのJSフォルダー内にあります。

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

その他のFusionChartsとjQueryリソース

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

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