Rohit Boggarapu のすべての投稿

対話型の米国地図使用して jQuery & FusionCharts を作成します。

From Creating an Interative US Map Using jQuery & FusionCharts

jQuery は間違いない人気の JavaScript ライブラリの一つです。
Libscore によると、約トップ 100 万のウェブサイトの 70% は、jQuery を使用します。
良いチャンスがあるので、jQuery はあなたの一部r 技術スタックと同様。
’ の代わりにこのチュートリアルでは jQuery を使用することを決めた理由バニラ JavaScript のような私は、私の最後の記事でした。
私たちのインタラクティブな構築に今日は地図 FusionCharts jQuery を使って ’ コアのグラフの JavaScript ライブラリとそのグラフの jQuery プラグイン。
ここで ’ s は、私たちの地図のようになります: それは憎悪犯罪事件を表す米国の地図s すべての 2013 年に状態。
データは、FBI とこの地図/トピを選ぶための私のインスピレーションからSamuel ベネットから来た c ’ 同じの s 表現。
デモでスライダーをドラッグしてみてください。
上何を経験する私たちが実際に作るつもりこのチュートリアルで。
地図を作成する手順 4 私このチュートリアルに分けて次の 4 つのステップ: ステップ 1: データの準備します。
手順 2: 取得ピグncies。
ステップ 3: の作成およびマップのコンテナーを選択します。
ステップ 4: マップを挿入します。
ステップ 1: Pマップの状態データ プロット米国の修理、各状態に対応する値がある必要があります。
上ce ではこれらの値がある場合、我々 は各状態のオブジェクトがデータ配列になります。
内側各オブジェクト id と値の属性の値を設定していきます。
各状態は、ユニークな id を持ちます。
エクサの例、アリゾナ州は、アリゾナ州の値に対応するをプロットしたい実際のデータが含まれていますその特定の状態。
これは私たちのデータの配列のようになります: " データ ": [ { " id ": " こんにちは "、" 値 ": " 2 "}、{" id & #34;: " DC "、" 値 ": " 13.3 "} / / より多くのデータ ] t 内彼は各状態のオブジェクト (“ カリフォルニア州 ”、“ こんにちは ”、“ DC ” 等) mor を追加することができますe オプション: リンク: 他のページへのリンクや、次のビューにドリル ダウンを提供するため。
tooltext: c特定のエンティティのためのツールチップをカスタマイズするために使用します。
についてより多くの洞察を表示することができます。
このように状態。
色: これは特定の状態にカスタム色を与えるに使用できます。
それは、します。
デフォルト マップの色に乗る/色範囲。
fontSize: 特定のエンティティのフォント サイズを調整するには名 (この例では状態名)。
それは目立つものを作るための良い方法をすることができます。
showLabel: 非表示にするまたは特定のエンティティ (私達の場合の状態) のラベルを表示します。
一言で言えば、デフォルトをオーバーライドできます。
t 内部の個々 のオブジェクトの属性を使用して特定の状態/エンティティのグラフ設定。
詳細については上で論議されるそれらのような属性マップ属性ドキュメントを訪れることができます。
手順 2: 取得するデpendencies それ ’ に私たちのプロジェクトの依存関係を含める s 時間。
4 つある: jQuery ライブラリy. FusionCharts ’ コアの JavaScript ライブラリです。
jQuery プラグインのグラフ。
Java スクリプトの設定をマップ ファイル (説明エドとコード スニペット後リンク)。
< 頭 ><!-jQuery の--> < スクリプトの型 = & #34; テキスト / javascript " src = " jquery.js " >< / スクリプト ><! ― FusionCharts &# 39;コア JavaScript ファイル--> < スクリプトの型 = " 本文 / javascript " src = " fusioncharts.js " >< / スクリプト ><! ― FusionCharts ' jQuery プラグイン--> < スクリプト tタイプ = " 本文 / javascript " src = " jquery plugin.js " >< / スクリプト ><!-FusionCharts マップ ファイル--> < スクリプトの型 = " 本文 / javascript " src = " fusioncharts.maps.js " >< / スクリプト >< スクリプトの型 = " 本文 / javascript " src = " 融合charts.usa.js " >< / スクリプト >< / ヘッド > fusioncharts.maps.js は pl に必要なotting マップ、および fusioncharts.usa.js は、米国の地図を企んでいるので必要です。
プロットの場合ing 他マップ、地図にプロットするのに対応する同様のファイルが必要になります。
これらのフィルes はマップ定義ファイルと呼ばれる、このページからダウンロードすることができます。
それも簡単に説明ホーファイルをプロジェクトにインクルードする w。
注: fusioncharts.usa.js と fusioncharts.world.js、税込コアのダウンロード パッケージにほー。
ステップ 3: 作成および地図のコンテナーを選択する私たちe ページの私たちのマップを配置する HTML < div >: < 体 >< div id = " 問い合わせマップ " > US のマップはその方法! < / div >< / 体 > 次に我々 は jQuer を使用して私たちのマップ コンテナーを選択y ’ s $ セレクター: $(' #us マップ ') メモ: すべての地図やグラフをあなたのページのユニークな必要があります< div > コンテナーです。
ステップ 4: この最後のステップでは、地図を挿入を使用してマップを挿入しますertFusionCharts の jQuery プラグインのメソッド。
ここで ’ のコードを達成するため: (関数 { $("#us-map").insertFusionCharts ({型: ' 米国 '、幅: ' 100% '、h8: ' 600 '、dataFormat: ' json '、データソース: {" グラフ ": {" キャプション ": " の状態によって嫌い "、/ / 属性をグラフより}、" colorrange ": {" minvalue ": " 0 "、" startlabel "。
" 低 "、" endlabel ": " 高 "、" コード ": " #ffffff "、" グラデーション ": " 1 "、" カラー ": [ {" maxvalue & #34;: " 2.55 "、" 表示値 ": " 平均 "}、{& #34maxvalue ": " 10 "、" コード ": " 42647f "} ]}、" データ ": [ / / ステップ 1 で説明した ]}}); }()); ここでは、上記のコード スニペットのいくつかの説明: タイプ: マップの種類を定義します 我々 の場合の米国。
width: マップの幅 (100% 指示におけるコンテナーの幅を占めるマップ)。
高さ: ch の高さアート。
dataFormat: JSON、我々 は JSON を使用しているので。
また、XML はデータが XML である場合は許容されます。
データ:地図データが含まれています。
詳細については、上記の手順 1 を参照してください。
グラフと colorRange: 次の他の説明上。
すべてうまくいった場合は、米国のマップの作業が表示されます。
されていない場合は、頭の上に私の CodePen のデモソース コードを参照してくださいし、何が間違って理解します。
何百ものでは、マップ デザインがカスタマイズマップをカスタマイズする使用することができます賛辞 ’ s デザイン。
その下にいくつか主要なものをカバーしています。
私は、私の例で使用している: グラフ: このオブジェクトにキャプションのようなチャート/マップ属性が含まれているサブ captiテーマに等 colorRange: このオブジェクトには色範囲のプロパティを制御する属性が含まれていますスライダーが地図の下部に表示します。
startLabel と endLabel、st のラベルを定義することができます。
・ スライダーの終点。
‘ 低 ’ と ‘ 高 ’ 州それぞれse colorRange オブジェクトの内部の色の配列は、グラデーションの色の進歩的なしきい値を定義します。
上部李バンドの mit は、maxValue とキーとして指定されます。
Chart オブジェクトについては、これを参照できます。
ページ。
色範囲のスライダーをカスタマイズする方法の詳細については、このページを参照してください。
方々l このチュートリアルで私の目的はあなたを得る、リソースが米国を作成する jQuery の使用を開始マップします。
その他のグラフを作成または jQuery 同様にマップする同じプロセスを使用できます。
場合します。
学んだこのチュートリアル、アプリケーションでが表示されますを使用すること、resour 以下ces 参考: ドキュメント: 場合 s はこれまで jQuery プラグインまたはマップのマニュアルを参照してくださいタック。
マップ: このページに印刷することができますどのようなすべてのマップを参照してください。
我々 の個々 の国/状態 id が含まれていますll マップ定義ファイル: 地図を印刷する fusioncharts.maps.js に加えする必要があります Java(定義ファイルをマップとして知られている) そのマップのスクリプト ファイル。
これは重要なこれなしの map を獲得した ’ の t の負荷。
この点の詳細については手順 2 を参照してくださいし、ダウンロード リンク。
HTML の ta を使用してください。
グラフをレンダリングする・ ブレス: jQuery プラグインによって提供されたクールな機能は、HTML テーブルを使用する能力JSON または XML 形式ではなく入力データ形式。
この機能についての詳細を学ぶことができますそのficial のページ。
私はあなたがこのチュートリアルは重宝願っています!記事についてのご質問がある場合や他 JavaScript チャートに関連する何かを感じる以下のコメントを投稿する自由。
私 ’ 私の bes を試して:) のための t 対話型の米国地図使用して jQuery & FusionCharts を作成するポスト登場 first おいたデザイン マガジン。
関連記事はありません。

最初の JavaScript チャートを作成する方法

From How to Create Your First JavaScript Chart

1 つの形態または他で、データの可視化の仕事と生活にかなり頻繁来ているようなデザイナーやフロント エンドの開発者。
した場合、analytics のダッシュ ボードまたは内部レポートします。
前にグラフを作成したこと、将来的にこれを行う必要があります非常に良いチャンスがあります。
だから、私素晴れらしい、インタラクティブなグラフを作成する方法を示すチュートリアルを書くことに。
これは何私たちはこのチュートリアルのこと: それは FusionCharts & #8217 を使用して構築された 2D の積み上げ縦棒グラフ;グラフの JavaScript ライブラリです。
表示するデータ セットがある b に積み上げグラフを使用します。
e はその成分に分けます。
これを撮影した例およびプロセスとしてちょうど私が説明任意のグラフをプロットする次のセクションを使用できます。
さあ、’ チュートリアル s get! N大手町: FusionCharts の試用版を取得してください ’ 彼らのダウンロードからライブラリ ページ場合するワシントン州nt 一緒に従うこと。
4 つのステップ別の java スクリプトの設定のグラフを作成する人々 がある異なる方法 oグラフを作成する f は常に場所でプロセスを持っている良いです。
私は私自身の 4 つのステップのプロセスがあります。
私は今、長年使用するいると、このように書きます s: ステップ 1: 構造化データ。
ステップ 2: Gエッティングの依存関係。
手順 3: グラフ コンテナーを宣言します。
手順 4: グラフのレンダリング。
ステップ 1: しずく業データ我々 は可視化のプロセスを開始する前に、我々 は plo に目的のデータを収集する必要があります。
t を使用するグラフの種類を決定します。
一度それらを行っている、それは構造体への時間使用するライブラリによるとデータ。
私たちの場合、つまり、我々 は ho を理解する必要があります。
w FusionCharts は、データを受け取ります。
FusionCharts を受け入れる JSON と XML の両方が我々 の JSON を使用しています。
それは私たちの例は、web 上でデータ交換の標準フォーマットゆっくりなった。
我々 は fo する必要があります。
rm のラベルと値を含むオブジェクトの配列。
ここで ’ の例の s: [ {" lアベル ": " バスケット ボール "、" 値 ": " 22000 "}、{" ラベル ": " Cricket "、" 値 ": " 12000 "}. ] 上記のデータ形式が ba には十分列、バー グラフのように sic やパイ、しかし、我々 はないプロット基本的なグラフ今日 s を行う必要余分な omething。
すべてのグラフの種類が他のものよりわずかに異なる目的を以来、それはしばしば dif です。
そのグラフに必要な正確なデータ形式を覚えている ficult。
しかし、これはソルに簡単な問題ve: チャート属性ページまたは例ギャラリーに向かうだけのページし、th の名前を入力e グラフにプロットします。
ライブ サンプルの完全なソース コードが表示されます。
’ S それ。
できますそこからコピーし、データ ポイントの数に応じて調整します。
あなたが見ることができます。
このページで 2 D の積み上げ縦棒グラフのデータ形式。
データセット内の 4 つのオブジェクトを使用しています。
配列 各シリーズの 1 つ。
[カテゴリ] を含むカテゴリ配列があると各データ プロット (年) の定義。
それ ’、これだけ頭のような理解することは困難上 CodePen としてくださいライブ ソース コードにこの手順を消化するために 2 分を取る。
手順 2: 取得これは、する任意の web アプリケーションの標準的なステップの依存関係。
あなたはすべての dependen を含める必要があります。
HTML < スクリプト > タグを使用してプロジェクトの cies。
このグラフはちょうど 2 つの JavaScript ファイル f に依存します。
rom の FusionCharts とここで ’ s どのように我々 はそれらを含む: <!-FusionCharts JavaScript ライブラリ--& gt; < スクリプト src = " パス / fusioncharts.js " 型 = " 本文 / javascript " >< / sアクティブ スクリプト >< スクリプト src = " パス / fusioncharts.charts.js " 型 = " 本文 / javascript & #34>< / スクリプト >、’ s 私たちのグラフを作成する必要がありますすべての依存関係。
できますグラフにカスタム フォントを追加するフォント ファイルのようなより多くのものを追加 ’ s 不要アルl 時間。
私 ’ ll はこの下の詳細について話し合う ‘ デザインのカスタマイズ ’ セクション低。
手順 3: グラフ コンテナー上に我々 の HTML ページを宣言、我々 は w 内のコンテナーを作成する必要があります。
hich 私たちのグラフは、移動する必要があります。
私は個人的にこの HTML < div > をお勧めします。
ここで ’ s ホーw と定義する: < 体 >< div id = " 積み上げグラフ " > 美しい積み上げグラフ、ここでロード! < / div >< / 体 > 私が < div > 上記 id を与えていることに注意してください「積み上げ-チャート」。
私 ’ ll はコンテナーを検索するための次のステップでこれを使用します。
ステップ4: 我々 が享受する最後の手順では、グラフ表示・ FusionCharts インスタンスを作成します。
stackedcolumn2d とタイプを持つグラフのインスタンスし、幅、高さ、dataFormat および dataSour を定義ce。
これはそれ (コード スニペット後説明) を行うための JavaScript コード: FusionCharts.ready (function() {var ピラミッド型図表新しい FusionCharts を = ({型: ' stackedcolumn2d '、用いてt: ' 積み上げグラフ '、幅: ' 100% '、高さ: ' 450 '、dataFormat: & #39; json '、データソース: {" グラフ ": {" キャプション ": " Coヨーロッパで JavaScript トラフィックの mposition "、" captionFontSize ": " 28 "、/ / 化粧品をより図表}、" カテゴリ ": [ {& #34カテゴリ ": [ {" ラベル ": " 2012年 " / / fo のラベルよりr データ プロット}、.]} ]、" データセット ": [ {" セリesname ": " リアルタイム "、" データ ": [ {" 値 ": " 30 ・# 34; {}. / / より多くのデータ} ]}}); stackedChart.render(); });私は、カテゴリとステップ 1 のデータセットの配列を説明しました。
ここで ’ s 他のティについて上記のコードで何が起こって ngs: FusionCharts を chart インスタンスを作成しました ’ を構築またはピラミッド型図表変数。
ページ上のすべてのグラフでお越しの際にも別の変数。
このバッ利用コードの前に呼び出されるを防ぐために FusionCharts.ready メソッド内にラップされて、コア ライブラリを読み込みます。
次 stackedcolumn2d グラフとグラフの種類を設定します。
各グラフは、独自のユニークです名 (またはエイリアス)。
このグラフは 100% (フル コンテナーの幅を占めますが) と固定の高さの幅450 px。
前述のとおり、我々 は JSON データ形式を使用しています。
我々 を使用して指定する必要がありますのでdataFormat パラメーター。
グラフとその化粧品のデータ データ ソース内。
最終的なly さん、私たちは積み上げグラフ部でグラフを読み込むに render メソッドを呼び出します Everythin に従った場合g 私は上記で説明したし、今ではあなたと作業チャートが必要があります。
ヨーヨーのデザインをカスタマイズします。
私のコードのいくつかの属性/パラメーターに気づくでしょう、私 didn ’ t 上記の説明と migh一見奇妙な音。
これらとは何かチャート属性と呼びます。
、d グラフのも足りない詳細をカスタマイズすることができます。
それ ’ s 関してすることはできませんe すべてそことして何百もの異なる属性が、以下にいくつか主要なものをカバーしています。
bgColor と canvasBgColor 一緒にグラフを制御することを許可する ’ s 背景色。
任意の hカラー ex コードは許容可能なこれらの属性への入力として。
paletteColors 定義色のシリーズ各列に使用すること。
最高の組成は最初の色は、2 番目の h になりますighest は、ようにリストで 2 番目の色をかかります。
legendPadding では、することができます制御空間トゥイーン グラフ キャンバスと伝説。
baseFont は、グラフのフォント ファミリを定義します。
あなたはいずれかを私たちことができます。
e のフォントが好きです。
私が使用している ‘ ダニエルメリウェザー ’ Google フォントから。
フォント ファイルが含まれて< head > セクションに含めるし、フォント名を baseFon の値として設定するフォントt. ことができるカスタマイズの表面に傷がある私。
詳細については、私のために2 d チャート属性ページにアクセスする t は積み上げ縦棒グラフです。
その他のグラフを作成する場合、その名前を入力するだけと、そのグラフで使用できるすべての属性が表示されます。
次は何ですか。
今では、ここから行って、最初の JavaScript のグラフをコーディングしているか。
答えするため以下のいくつかのリソースを記載している: 世界が一杯のフレームワークやライブラリでは、多くはないと人々 は、バニラ JavaScript を使用しています。
だからあなたを支援する、ラッパーと plugi のコレクションがあります。
人気の高い技術の ns。
私は私の次のポストの詳細に jQuery のプラグインのチャートをカバーするつもりです。
ライブラリを使用して起動すると、一度は、問題に直面するのにバインドされます。
すべてのソリューションを見つけることができます。
スタック オーバーフローが発生します。
だから公式のマニュアルは、あなたの友人になります。
いくつかのインスピレーションが必要ですか。
Viグラフすべてのグラフの種類のライブ サンプルを見つけるには、ギャラリーをいじってください。
でも 1 つをフォークすることができ、毎回ゼロからのスタートではなくそこから行きます。
Tuto について質問がある場合JavaScript のグラフ、他関連か何かリアル気軽に以下のコメントを投稿します。
私 ’ ll try:) を助けるために私のベスト ポストを作成あなた最初 JavaScript チャート斑点に最初に出現する方法yboy デザイン マガジン。
関連記事はありません。