AngularJSでデータダッシュボードを構築する

AngularJSをいじり始めた途端、データを取得してマークアップで直接使用できるため、データの視覚化に大きな可能性があることに気づきました。このアプローチは、別のライブラリに依存するのではなく、データの視覚化を最初から作成するための非常に迅速で簡単な方法を提供する可能性があります。

このチュートリアルでは、Webアプリ(この場合は「JogTracker」と呼ばれるRunKeeperクローン)のデータダッシュボードの作成を開始します。 conic-gradient()ポリフィルを使用する前に、HTMLスタイルでのAngular値の使用からインラインSVGへと進みます。



多くのフィットネス追跡アプリケーションと同様に、Runkeeperの最も人気のある部分の1つは、データを追跡する機能です。

多くのフィットネス追跡アプリケーションと同様に、Runkeeperの最も人気のある部分の1つは、データを追跡する機能です。

私にとって、この手法の最も魅力的な部分は、JavaScriptの知識が最も限られている場合でもデータの視覚化の構築を開始できることです。主にスクリプトファイルを使用してデータを保持するため、JavaScriptオブジェクトを記述できれば、順調に進んでいます。

アプリのセットアップ

このプロトタイプでは、スタイルとレイアウトに関してBootstrapに手間のかかる作業を任せて、Angular固有のコードに集中できるようにします。 HTMLにAngularライブラリを含め、Angularアプリをセットアップしてリンクしたと仮定します( サンプルコード 必要に応じて、これを行う方法の詳細について)。

次に、JogTrackerアプリケーションのデータ構造を作成します。これは非常にシンプルに保ち、各「ジョグ」は時間、距離、日付のプロパティを持つオブジェクトとして保存されます。これらのオブジェクトを$ scope.dataという配列に格納します– $ scopeを使用すると、HTMLのコントローラー内からこのデータに直接アクセスできます。

$scope.data = [{ distance: 3.24, time: 34, date: new Date('May 01, 2015'), }, // And so on... ]

ビジュアライゼーションを作成するには、時間と距離の最大値も知っておく必要があります。これは、JavaScriptの短い部分でそれぞれに対して行うことができます。

$scope.maxDistance = Math.max.apply(Math, $scope.data.map(function(jog) { return jog.distance; }))

その後、同じことを行って最大時間を見つけることができます。これで、すべてのデータが保存され、HTMLからアクセスできるようになりました。これで、JavaScriptは終わりです。

マンガページをデジタルで着色する方法

棒グラフ

私が作成しようとしている主な視覚化は、データからの最後の10ジョギングを示す棒グラフであり、距離と時間の両方の棒が付いています。アクセシビリティは重要なので、HTMLでデータを含むテーブルを作成し、CSSを使用してこれを視覚的に棒グラフに変換します。

棒グラフはHTMLテーブルであるため、アクセシビリティのためにスクリーンリーダー専用のテーブルヘッダーを追加できます。

棒グラフはHTMLテーブルであるため、アクセシビリティのためにスクリーンリーダー専用のテーブルヘッダーを追加できます。

まず、Angularのng-repeat機能を利用して、$ scope.data配列をループし、データをテーブルに吐き出します。

{jog.date } { number} Minutes { number} Miles

これにより、データのエントリごとにテーブル行が作成されます。各エントリの個人名をジョグとして宣言します。これにより、jog.distanceなどのそのオブジェクトのプロパティにアクセスできます。 |を使用していくつかのAngularフィルターも利用しました。 ng-repeat属性で、limitToフィルターを使用すると、表示されるエントリの数を制限できます。値が10の場合、最初の10エントリが表示されますが、最後の10エントリが表示されます。このために、limitToを-10に設定します。

筋肉の腕の描き方

これで、データを示すアクセス可能なテーブルができました。それを棒グラフに変えましょう。まず、テーブルの外観を上書きするCSSを設定する必要があります。

.bar-chart { display: block; height: 300px; position: relative; border-left: 1px solid #668284; border-bottom: 1px solid #668284; } .bar-chart td { position: absolute; width: 20px; bottom: 0; }

これにより、テーブルとセルの両方がブロック要素に変わり、X軸とY軸を示す境界線が追加され、バーとなるセルの位置と幅が設定されます。 Angularマジックを使用して、leftプロパティを使用してチャートに沿ってバーの間隔を空けるため、絶対位置を設定します。

また、背景色を付けて位置をオフセットするために、各バーにいくつかのクラスを設定しました。 .legendセルにはバーの下に日付が表示されるため、そのように配置されています。 .timeは.distanceバーの横にあるため、ある程度のマージンを持って微調整されています。

.bar-chart .legend { bottom: -40px; } .bar-chart .distance { background: #B9D7D9; } .bar-chart .time { background: #668284; margin-left: 30px; }

バーに沿ってテキストを回転させるなど、余分なスタイルのタッチがたくさんあるので、完全なコードについてはサンプルプロジェクトを参照してください。では、HTMLのAngularマジックを掘り下げましょう。

{ date} {jog.time } Minutes {{jog.distance}} Miles

グラフ作成の重要な部分は、Angularデータ値を使用してスタイル設定を適用するng-style属性です。 ngスタイルのスタイリングは、キーと値のペアを持つオブジェクトのように記述されます。ここで算術演算を渡し、数値と文字列を混在させることもできます。

まず、すべてのセルで同じである左側の値を見てみましょう。チャートの幅全体に10本のバーを均等に配置したいので、10パーセント刻みで間隔を空けます。

left:$index * 10 +'%'

これを行うには、JavaScript配列の場合と同様に、Angularがng-repeatのすべてのエントリに割り当てる$ index値を利用し、ゼロから1ずつ増加します。したがって、数学を実行すると、最初のセルの左の値は0%– $ index(0)x 10(0)+ '%'(文字列としての単位)になります。この列の2番目のセルの左の値は、10パーセント、次の20パーセントというようになります。数学を使ってバーの高さを変えることもできます。

height: (jog.distance / maxDistance) * 300 + 'px'

ここでは、個々のジョグの距離を取得し、それを配列の最大距離で除算しています。次に、これに300(グラフの高さ(px))を掛けてから、pxの単位を文字列として追加します。

最長距離のエントリで何が起こるかを考えると、jog.distance / maxDistanceの結果は1になり(同じ数であるため)、300pxの結果になります。つまり、最大のバーは常にチャートの高さ全体になり、他のバーはこれを基準にした高さになります。

理想的には、このロジックのほとんどは、おそらくカスタムAngularフィルターとしてJavaScriptに移動され、HTMLがよりクリーンになります。ただし、理解を容易にするために、この段階ではHTMLで直接使用します。

Angular data-vis magicの最後の部分は、条件が満たされているかどうかに基づいて、ng-class属性を使用してクラスを適用することです。この場合、最も長いジョグにハイライトのクラスを追加したいので、ng-class = '{highlight:jog.distance === maxDistance}'を自分のジョグに追加します。素子。

結論

最初のAngularデータの視覚化が完了しました!角度値を使用できるのは、スタイル属性だけではありません。それらをインラインSVG内で使用でき、Lea Verouのconic-gradient()などのポリフィル内で使用して、より複雑な視覚化を作成することもできます。

言葉ニック・モートン

Nick Moretonは、バーミンガム市立大学の講師です。彼の専門分野には、HTML、CSS、JavaScript、AngularJS、WordPressなどがあります。この記事はもともとネットマガジンの274号に掲載されました

MacBook Pro15インチ用ラップトップカバー

これが好きですか?これらを読んでください!