プロット用の JavaScript ライブラリのレビュー。 JavaScript でグラフとチャートを作成する JavaScript でグラフを描画する

ヴラド・メルジェヴィチ

Web サイトでは、データをユーザーに明確かつ簡単に伝えるために、さまざまな図を使用する必要がある場合があります。 以前は、同様のグラフを Excel で作成し、Web サイトに画像として挿入していました。 しかし、私たちは情報技術の時代に生きているので、図をすばやく簡単に挿入して、インタラクティブで美しいものにしたいと考えています。 そして、Google が登場して、このようなサービスを提供してくれました。

このページでは、可能なスケジュールの選択が可能です。 各グラフには、色、位置、タイトル、アニメーションなど、すべてを好みに合わせてカスタマイズできる多くのオプションがあります。 こうした微妙な点に踏み込みたくない場合、またはチャートの標準的な外観に完全に満足している場合は、最小限のセットで十分です。

円グラフと折れ線グラフの 2 種類のグラフのみを考えます。 残りのタイプは類推によって接続されており、1 つのグラフを追加する方法を理解すると、他のタイプとの作業が簡単になります。

円グラフ

この図は、さまざまなサイズにカットされたケーキに似ています。 すべての部分の合計は 100% であり、各部分はその値に比例して円を分割します。

例 1 は、空気組成を円グラフとして表示するコードを示しています。

例 1: 円グラフ

円グラフ google.load("visualization", "1", (packages:["corechart"])); google.setOnLoadCallback(drawChart); functiondrawChart() ( var data = google.visualization.arrayToDataTable([ ["ガス", "体積"], ["窒素", 78.09], ["酸素", 20.95], ["アルゴン", 0.93], [ "二酸化炭素", 0.03] ]); var options = ( title: "大気組成", is3D: true, pieResidueSliceLabel: "Rest" ); var chart = new google.visualization.PieChart(document.getElementById("air") ); chart.draw(データ、オプション)

例の結果を図に示します。 1.

米。 1.円グラフビュー

ドキュメント内の図を追加する場所に、次のコードを挿入します。

スタイルを使用して図の幅と高さを設定し、スクリプトが機能するように識別子を追加します。 document.getElementById には同じ ID を指定する必要があります。

チャート パラメーターは、表示される実際のデータ (データ変数) と設定 (オプション変数) の 2 つのブロックで構成されます。 データの最初の行は後続の列の名前を指定しており、これがなければ表示は行われませんが、これがないと正しく表示されません。 オプションには図のタイトルが書かれ、立体感やその他の設定も指定できます。これらはすべてオプションであり、指定しない場合はデフォルトで使用されます。

図はインタラクティブであることがわかり、その部分または凡例の上にカーソルを置くとその部分が強調表示されます。

例、パラメータのリスト、円グラフの説明は、次のアドレスで入手できます: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

ヒストグラムは、異なる値を相互に比較するのに役立つ棒グラフです。 例として、19 世紀のロシアとアメリカの石油生産を考えてみましょう (図 2)。 横軸（横軸）は年、縦軸（縦軸）は石油生産量（単位：千トン）を表しています。 長方形の高さは、指定された値に対応します。

米。 2. ヒストグラム

このタイプのチャートを作成する原理は前のチャートと似ています。タグを追加し、それをチャートのデータを保存するスクリプトに関連付けてパラメーターを表示します (例 2)。

例 2: ヒストグラム

ヒストグラム google.load("visualization", "1", (packages:["corechart"])); google.setOnLoadCallback(drawChart); functiondrawChart() ( var data = google.visualization.arrayToDataTable([ ["年", "ロシア", "米国"], ["1860", 1.3, 70], ["1885", 2000, 3120], [ "1901", 12170, 9920] ]); var options = ( title: "石油生産", hAxis: (title: "年"), vAxis: (title: "千トン") ); .getElementById("oil")); chart.draw(データ, オプション)

まず、タグを追加し、スタイルを使用して希望の幅と高さを指定します。 また、スクリプトが選択したグラフを要素に挿入する際に使用する識別子も重要です。 前の例と比較すると、スクリプト自体はその構造を維持しており、チャートに表示される実際のデータとそのさまざまな設定という 2 つの編集可能な部分で構成されています。 hAxis パラメーターと vAxis パラメーターを使用して、わかりやすくするために軸のタイトルを追加します。

まとめ

さまざまなスキルレベルのユーザーを対象としたサービスであることが便利です。 添付の例をコピーすると、すぐに既製の標準グラフを取得できます。 多くのパラメータを完全に理解し始めたユーザーは、自分の好みに合わせて作成された、サイトのデザインに似たグラフィックスを得ることができます。

グラフ自体は非常に速く表示され、呼び出されたファイルは最初のダウンロード中にキャッシュされるため、サイト上のその後のグラフの表示は高速になります。 Internet Explorer の古いバージョンを含むすべてのブラウザがサポートされています。

サービス ドキュメントはロシア語に翻訳されておらず、英語でのみ提供されているため、一部のユーザーを怖がらせる可能性があります。 そのための信念はただ 1 つだけです、それは言語を学ぶことです。

グラフは、データを提示する際の優れた視覚補助手段です。 これらがなければ、高品質の管理パネルを作成することは不可能です。 インストールはそれほど簡単ではありません。 ただし、このタスクを簡単にする新しいライブラリ xCharts があります。 今日は、このプログラムと Twitter Bootstrap の Date Range パレットを使用して、MySQL テーブルからデータを取得する Web アプリケーション用の美しい AJAX グラフを作成します。

HTML

この言語のデモ構造は非常に単純です。プロットを開始して情報を選択するには、ページに要素を追加する必要があります。 とにかくページでの読み込みを有効にしているので、ページ スタイルとアイコンを使用してこの構造に見栄えを良くすることができます。

インデックス.php

jQuery と AJAX を使用したきれいなグラフ | チュートリアルジンのデモ

ここでは多くの外部リソースが使用されます。 メインセクションには、xCharts、数値ソーター、アップロード (CloudFlare の超高速 CDN から統合)、および style.css ファイル用のカスケード スタイルシート ファイルがあります。

テーブル ショートカットを閉じる前に、JQuery ライブラリ、d3.js (xcharts プログラムに必要)、xcharts、ユーザーフレンドリーな Sugar.js ライブラリ (日付範囲プラグインが必要)、日付範囲プラグイン、および script.js が用意されています。ファイル。 次に、すべてがどのように連携して機能するかを見ていきます。

MySQL

冒頭で述べたように、私たちが書いているスクリプトは MySQL テーブルからデータを取得し、それをグラフに表示します。 schema.sql 内のテーブルを作成する SQL コードは、上部のボタンを使用してダウンロードできる圧縮ファイルにあります。 テーブルは次のようになります。

列は 3 つだけです。 日付列には一意のインデックスが割り当てられます。つまり、同じ日に重複するエントリが存在することはできません。 「販売実績」欄には、その日の販売数が記録されます。 データベースは確かに異なりますが、PHP スクリプトから JSON 情報を交換するために使用される単純なテキスト形式にデータを構造化する形式に正しい答えが得られる限り、問題はありません (これについては次で詳しく説明します)。セクション）。

注: setup.php に MySQL 接続の詳細を入力することを忘れないでください。 次に、新しい MySQL データベースを作成し、PHPMyAdmin システムまたは選択した管理システムから schema.sql をインポートする必要があります。

PHP

PHP スクリプトでは、渡された開始情報と終了情報に対応するレコードをテーブルから選択し、配列内のすべてのデータを収集して、テキスト データ交換形式 (JSON) で出力します。

ajax.php

Header("Content-Type: application/json"); // ライブラリのセットアップ require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // 結果を選択 $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // foreach のデータを含む新しい配列を作成します ($results as $key => $value) ( $data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; echo json_encode($data);

ここでは私のお気に入りのライブラリである Idiorm を使用しています。 私は過去にウェブサイトのコンサルティング（および多くの個人プロジェクト）にそれを使用しました。 これは (ライブラリ/フォルダー内にある) 1 つのファイルだけなので、データベースの操作が非常に簡単になります。 私が行っているのは、情報の要求と一致する開始タイムスタンプと終了タイムスタンプの間の時間値を持つすべての結果をデータベースから取得することだけです。

結果の JSON 応答は次のようになります。

[( "ラベル": "2013-01-07", "値": "4" ), ( "ラベル": "2013-01-06", "値": "65" ), ( "ラベル": "2013-01-05"、"値": "96")]

ラベルのプロパティには、対応する行に MySQL の数値が含まれ、列にはその日の販売数が含まれます。 このデータを適切に処理し、xCharts プラグインとの共有に適した形式に変換するかどうかは、JavaScript コードによって異なります。

JavaScript

すべての JS コードは、assets/js/script.js にあります。 コードは少し長いので、理解しやすいように、いくつかに分けて紹介します。

まず、いくつかの変数を設定し、日付範囲ピッカー プラグインを初期化します。 私が使用した dat 範囲は元のプラグインからのフォークであることに注意してください。 元のバージョンは xCharts と競合する従来のデータ ライブラリである date.js に依存しているため、このバージョンで作業することにしました。 代わりに、信頼できる最新情報を備えた優れた便利なライブラリである Sugar.js が使用されます。

アセット/js/スクリプト。 js

$(function() ( // shugar 関数を使用して標準日付を設定します var startDate = Date.create().addDays(-6), // 6 日前 endDate = Date.create(); // 今日 var range = $ ( "#range"); // 日付をエントリ順に表示 range.val(startDate.format("(MM)/(dd)/(yyyy)") + " - " + endDate.format("(MM)/ (dd)/(yyyy)")); // チャートをロードします ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, ranges: ( "Today": ["today", "today " ], "Yesterday": ["yesterday", "yesterday"], "Last 7 Days": , "Last 30 Days": // ここにさらにエントリを追加できます ) ),function(start, end)( ajaxLoadChart(始まりと終わり ））;

ご覧のとおり、sugar.js の情報とメソッドを使用して範囲の開始点と終了点を決定することができました。過去 7 日間の結果をスクリプトに入力し、範囲入力フィールドを更新しました。

次に、グラフを作成しましょう。

// チャートをポイントするときのヒント var tt = $("").appendTo("body"), topOffset = -32; var data = ( "xScale" : "時間", "yScale" : "linear", "main" : [( className: ".stats", "data" : )] ); var opts = ( paddingLeft: 50, paddingTop: 20, paddingRight: 10, axisPaddingLeft: 25, tinyHintX: 9, // 水平方向に表示するティック数 dataFormatX: function(x) ( // ここに // ajax に付属のタイムスタンプ.php を対応する JavaScript Date オブジェクトに変換します return Date.create(x) ), tinyFormatX: function(x) ( // x 軸のラベル形式を設定します return x.format("(MM)/(dd) "); ), "mouseover": function (d, i) ( var pos = $(this).offset(); tt.text(d.x.format("(Month) (ord)") + ": " + d.y ).css(( 上: topOffset + pos.top、左: pos.left )).show() ), "mouseout": function (x) ( tt.hide(); ) ); // 新しい xChart インスタンスを作成し、チャート タイプ // の日付と追加関数のセットを渡します var chart = new xChart("line-dotted", data, "#chart" , opts);

まず、プロパティとコールバックを含む xCharts 構成オブジェクトを定義します。 dataFormatX プロパティでは、AJAX リクエストから返された yyyy-mm-dd 文字列を適切な JavaScript Date オブジェクトに変換して、プラグインが文字列を正しく表示して計算できるようにします。

また、mouseover/mouseout プラグインの情報ハンドラーを使用し、それをツールヒントの表示に使用します (プラグインにはいずれかのモジュールが付属していません)。

最後に、AJAX 経由でデータをロードする JavaScript 関数を示します。

// AJAX 経由でデータをロードし、チャートに表示する関数 function ajaxLoadChart(startDate,endDate) ( // データがない場合、チャートは空になります if(!startDate || !endDate)( chart.setData(( "xScale" : "time ", "yScale" : "linear", "main" : [( className: ".stats", data: )] )) // それ以外の場合は、Ajax リクエストを作成します $.getJSON ("ajax.php ", ( start: startDate.format("(yyyy)-(MM)-(dd)"), end: endDate.format("(yyyy)-(MM)-(dd)") ) , function(data) ( var set = ; $.each(data, function() ( set.push(( x: this.label, y: parseInt(this.value, 10) )); )); chart.setData (( "xScale" : "時間", "yScale" : "linear", "main" : [( className: ".stats", data: set )] ));

xCharts には setData メソッドが用意されているため、表示されたデータを簡単に移動または置換できます。 className 属性は、プラグインがグラフを定義するために使用するものであるため、重要です。 これを無視すると、あらゆる種類の奇妙なバグが発生する可能性があります (信じてください、私は知っています)。

これで美しい図が完成しました。

終わり！

この例を使用すると、管理領域を改善し、美しいインターフェイスで統計データを視覚化できます。

  • 翻訳

チャートやグラフのないダッシュボードを想像することはほとんど不可能です。 複雑な統計を迅速かつ効率的に表示します。 さらに、優れた図は Web サイト全体のデザインも改善します。

この記事では、チャート/ダイアグラム (およびピボット テーブル) を作成するための最適な JavaScript ライブラリをいくつか紹介します。 これらのライブラリは、将来のプロジェクト用に美しくカスタマイズ可能なグラフィックを作成するのに役立ちます。

ほとんどのライブラリは無料で再配布可能ですが、一部のライブラリには追加機能を備えた有料バージョンがあります。

D3.js - データ中心のドキュメント 今日、グラフについて考えるとき、最初に思い浮かぶのは D3.js です。オープン ソース プロジェクトである D3.js は、間違いなく、既存のライブラリのほとんどにはない多くの便利な機能を提供します。 「開始と終了」などの機能、強力なトランジション、jQuery やプロトタイプに似た構文により、グラフやチャートの作成に最適な JavaScript ライブラリの 1 つとなっています。 D3.js では、HTML、SVG、CSS を使用して生成されます。

他の多くの JavaScript ライブラリとは異なり、D3.js には、すぐに構築されたグラフは付属しません。 ただし、D3.js で作成されたグラフのリストを見て、一般的なアイデアを得ることができます。

D3.js は、IE8 などの古いブラウザでは正しく動作しません。 ただし、ブラウザ間の互換性を確保するために、いつでも aight プラグインなどのプラグインを使用できます。

D3.js はこれまで、NYTimes、Uber、Weather.com などの Web サイトで広く使用されてきました。

Google チャート


Google Charts は、シンプルかつ簡単にグラフを作成するために私が定期的に使用している JavaScript ライブラリです。 複合棒グラフ、棒グラフ、カレンダー グラフ、円グラフ、地理グラフなど、さまざまな事前構築済みグラフを提供します。

Google グラフには、グラフの外観を変更するのに役立つさまざまな構成設定もあります。 グラフィックスは HTML5/SVG を使用して生成され、ブラウザ間の互換性と iPhone、iPad、Android へのクロスプラットフォームの移植性を確保します。 古い IE バージョンをサポートする VML も含まれています。

ハイチャートJS


Highcharts JS も非常に人気のあるグラフ作成ライブラリです。 サイトに多くの注目を集めることができる、さまざまなタイプのアニメーションが多数付属しています。 他のライブラリと同様に、HighchartsJS には、スプライン、形状、組み合わせ、縦棒、ヒストグラム、円グラフ、散布図など、事前に作成された多くのグラフが含まれています。

HighchartsJS を使用する最大の利点の 1 つは、Internet Explorer 6 などの古いブラウザとの互換性です。標準ブラウザは SVG を使用してグラフを表示します。 従来の IE では、グラフは VML を介して構築されます。

HighchartsJS は個人利用には無料ですが、商用利用にはライセンスを購入する必要があります。

フュージョンチャート


Fusioncharts は、2002 年に初めてリリースされた最も古い JavaScript ライブラリの 1 つです。 移植性と互換性を高めるために、グラフは HTML5/SVG および VML を使用して生成されます。

多くのライブラリとは異なり、Fusioncharts は JSON データと XML の両方を解析する機能を提供します。 これらのグラフは、PNG、JPG、PDF の 3 つの異なる形式でエクスポートすることもできます。

Fusioncharts は、IE6 などの古いブラウザとの高い互換性があります。 このため、多くの業界団体で最も好まれるライブラリの 1 つとなっています。

Fusioncharts の透かし入りバージョンは、個人プロジェクトでも商用プロジェクトでも無料で使用できます。 ただし、ウォーターマークを削除するにはライセンスを購入する必要があります。

フロート


Flot は、グラフ/チャートを作成できる JQuery 用の JavaScript ライブラリです。 最も古く、最も人気のある図ライブラリの 1 つ。

Flot は、棒グラフ、散布図、棒グラフ、縦棒グラフ、およびこれらのグラフ タイプの任意の組み合わせをサポートします。 IE 6 や Firefox 2 などの古いブラウザとも互換性があります。

Flot は完全に無料で、開発者への特別なリクエストに応じて商用サポートが提供されます。 以下は、Flot で作成されたチャートの例のリストです。

アムチャート


amCharts は間違いなく、世の中で最も見栄えの良いチャート ライブラリの 1 つです。 これは、JavaScript チャート、マップ チャート (amMaps)、および株価チャートの 3 つの独立したタイプに完全に分割されています。

上記 3 つの中で私のお気に入りは AmMaps です。 ヒート マップ、線の描画、マップへのテキストの追加、マップの上部へのアイコンや写真の読み込み、縮尺の変更などの機能を提供します。
amCharts は SVG を使用してグラフをレンダリングしますが、これは最新のブラウザーでのみ機能します。 IEバージョン9未満ではグラフが正しく表示されない場合があります。

EJS Chart には無料版と有料版があります。 無料版には、ページごとに 1 つ以上のチャート、およびチャートごとに 2 つ以上の (数値) シーケンスを使用できないという制限があります。 価格の詳細を確認してください。

uvチャート


uvCharts は、100 を超える構成オプションがあると主張されるオープン ソースの JavaScript ライブラリです。 すぐに使用できる 12 の異なる規格のチャートが含まれています。

UvCharts は D3.js ライブラリに基づいて構築されています。 このプロジェクトは、D3.js コーディングの複雑なニュアンスをすべて排除し、標準的な外観のグラフを簡単に実装できるようにすることを約束します。 uvCharts は SVG、HTML、CSS を使用して生成されます。

結論 将来のプロジェクトに最適なダイアグラム ライブラリを選択するのはあなた次第です。 グラフを完全に制御したい開発者は、間違いなく D3.js を選択するでしょう。上記のライブラリのほとんどは、Stackoverflow フォーラムで適切にサポートされています。

この記事を楽しんでいただければ幸いです。 良い一日を。

グラフやチャートの使用には非常に幅広い用途があります。 彼らの助けを借りて、多くの情報を便利でわかりやすい形式で表示できるため、すぐに理解して理解することができます。

Web ページにグラフやチャートを追加するには、いくつかの方法があります。 1 つ目は、おそらくすでに考えたことがあると思いますが、グラフィック エディターで描画することです。 しかし、これは最も便利で最速のオプションではありません。 JavaScript でグラフを作成する方がはるかに簡単かつ迅速です。必要なパラメータと外観を設定してページに配置するだけです。

この記事では、JavaScript でグラフやチャートを作成するのに役立つ 10 個のサービスとツールについて説明します。 他の作成方法については「」セクションを参照してください。

ブラフ
このサービスを使用して折れ線グラフを描画するには、数行のコードをコピーし、必要なパラメータを設定し、テキストを追加するだけです。 コードは非常にシンプルかつ明確なので、わずか数秒で理解できます。


PlotKit を使用すると、すべてのブラウザで正しく表示されるチャートやグラフを作成できます。 このサイトには、すぐに使い始めるためのドキュメント、チャート タイプの例、およびクイック ガイド (すべてのパラメーターと設定の説明が記載されています) が掲載されています。


このサービスを使用すると、優れたビジュアル機能を作成できます。 2*sin(4*x)^(x+4) などの式を入力し、「Enter」を押すと関数の準備が整います。 その後、URL をコピーしてページに貼り付けるだけです。


jQuery を使用して表、グラフ、チャートを作成するための最も強力なツール。 このサイトには、あらゆる種類のグラフの例のほか、パラメータと設定手順の詳細な説明が掲載されています。

フロート
Google の jQuery グラフ作成ライブラリ。 これについてはこれ以上何も書く必要はありません。すべてがすでに明らかです (: しかし、それでも、このサービスが柔軟でシンプルな設定を備えた膨大な数の美しいサンプルを提供していることに注意してください。


データのグラフやヒストグラム表を作成できます。 構築するには、必要なデータを入力し、「計算」ボタンをクリックする必要があります。 次に、コードをコピーし、小さなスクリプトをダウンロードします。 必要に応じて、すべてのデータをコード自体に入力できます。


このサービスでは、6 種類のグラフ (円グラフ、折れ線グラフ、動的グラフ、および 3 種類のヒストグラム) が提供されます。 設定、パラメータ、およびあらゆるタイプの図の詳細な例についての説明があります。

ラファエル
Raphaël は、グラフやチャートの作成をより簡単にする小さな JavaScript ライブラリです。 これは、このレビューで紹介したツールの中で最も強力なツールです。 ライブラリの機能の説明を読むよりも、ライブラリの機能を自分で確認する方が簡単です。

プロッター
Mootools で図を作成するためのライブラリ。 情報を美しくわかりやすい方法で表示する優れたツール。 これを構成するには、値を変更または追加するだけです。


このサービスの機能を使用すると、3D グラフィックスを構築できます。 機能の中でも、簡単なセットアップ、高速なスクリプト操作、コサイン グラフとサイン グラフを作成する機能は強調する価値があります。

特定の種類の情報をランディング ページや Web サイト一般に表示する必要がある場合があります。 このライブラリを使用すると、サイト用のグラフやチャートを作成できます。これは、思っているほど難しくありません。 一度それを理解する必要があります (この記事の例が役に立ちます)。 次に、データを入力するだけで、美しくアニメーション化されたグラフをお楽しみいただけます。 そういったものは常に注目を集めます。

ランディング ページやウェブサイトを特別なものにする唯一の方法ではありません。 以下に、プロジェクトに簡単に適用できる興味深いエフェクトをいくつか示します。

アニメーション化されたグラフの 3 つの例はすべて以下で見ることができます。

ダウンロード美しいグラフィックを自分の目的に使用するにはどうすればよいですか?

これらのグラフィックスも適応性があることをすぐに言いたいと思います。 モバイル デバイスからサイトにアクセスするユーザーの数は時間ごとに増加しているため、これは重要です。

このような美しいチャートは、Chartist.js というライブラリを使用して作成されます。

そして、応用することでそれらは「生き返り」、注目を集めます。 これを通常のランディング ページで見た訪問者の反応を想像してみてください。 結局のところ、誰も驚かないでしょうが、そのような要素は常にサイトの品質を向上させます。

まず、このライブラリを接続するのに役立つ手順を説明します。次に、いくつかの例を示し、このライブラリのすべての機能について説明します。 ただし、1 つの記事ですべての機能を完全に検討することはまったく不可能であることをすぐに警告します。

ステージ1。 必要なスタイルとスクリプトを接続します

スタイル ファイルとスクリプト ファイルをダウンロードしてホスティングに配置することもできますが、HTML に 2 行を挿入して必要なものをすべて接続する方がはるかに便利です。

初めて美しいグラフやチャートを作成するにはこれで十分です。 最後のステップが残っています。

ステージ3。 グラフ値の設定(JS)

まず、このようなグラフを作成する完全なコードをすぐに提示します。

コード自体は次のとおりです。

ジャバスクリプトコード

1 2 3 4 5 6 7 8 9 10 11 12 new Chartist.Line (".chart1" , ( ラベル: [ "Day 1" , "Day 2" , "Day 3" , "Day 4" , "Day 5" ] , series: [ [ 12 , 9 , 3 , 8, 4], [2, 1, 4.7, 5.5, 8]]), (fullWidth: true, chartPadding: (right: 50)));

この小さな JS スクリプトを完全に理解できるように、各行を見てみましょう。 そして、それぞれの行が何を担当しているのかを理解すれば、自分に合わせて値を変更できます。

  • 行 1 - この行では、一重引用符の間の値に注目してください。 ここでは、グラフまたは図を作成するブロックを指定します。
  • 行 2 - X 軸に沿って 1 つの部門の名前を一重引用符内のカンマで区切って書きます。
  • 行 3 ～ 6 - ここでは、グラフ上の各線の Y 軸の値を設定します。 角括弧内の値の 1 行 (このスクリプトでは 4 行目と 5 行目) が 1 行に対応します。
  • 8 行目 - 値 true を指定することで、グラフを「親ブロック」の幅全体に引き伸ばしました。
  • 9行目から11行目 - 右側の内側のインデントを設定します。 これは、X 軸に沿った分割の記述が途切れ​​ずに 1 つのブロックにまとめられるようにするためです。

上記のすべての手順に従えば、すでに美しいグラフが得られます。 残っているのは、必要な値を入力することだけです。 しかし、このグラフはインターネット上で見られる他のすべてのグラフと何ら変わりません。 このグラフに独自性を追加する方法を以下に示します。その後、注目を集めるようになります。

例 1. アニメーション化されたグラフ

しかし、上の画像のようなグラフを作成するにはどうすればよいでしょうか (画像はアニメーション化されています。アニメーションがない場合は、ロードされるまで待ちます)。

これを行うには、完成したグラフに要素のプロパティをいくつか追加するだけです。 グラフィック全体は SVG 要素で構成されているため、どの要素をアニメーション化するかを決定するだけで済みます。

この例のように 2 行をアニメーション化するには、次の CSS コードをスタイルシートに追加する必要があります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 /*チャート #1*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-line ( ストローク: #F04D3A ; ストローク幅: 5px ; ストローク-ダシャーレイ: 5px 5px ; アニメーション : ダッシュオフセット- 7 200ms 無限リニア ; ) /*最初の線のポイントの色*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-point( ストローク: #B22819 ; ) .chart1 .ct-chart 。 ct- series .ct-series-b .ct-line ( ストローク: #4DB543 ; ストローク幅: 5px ; ストローク-dasharray: 5px 5px ; アニメーション : ダッシュオフセット 200ms 無限リニア ; ) /*2 番目の線のポイントの色*/ .chart1 .ct -chart .ct-series .ct-series-b .ct-point( ストローク: #0FB500 ; ) /*破線の動きのアニメーション*/ @keyframes crashoffset ( 0% ( ストローク-dashoffset: 7px) ; ) 100% (ストローク-ダッシュオフセット: 0px ; ) )

JS 部分はここでは書きませんが、各例で非常に似ています。 上記の JS コードの説明を注意深く読んでいただければ、すべてを文字通り 1 行ずつ分析しましたが、ここでも理解するのは難しくないでしょう。

例 2. チャート上の主線を強調表示するアニメーション

ここ (上の画像) にアニメーションがあります。 表示されない場合は、画像が単に読み込まれていない可能性があります。そのままお待ちください。

これは変化を示し、グラフ上の特定の線に注目を集めるための優れた方法です。 すべてCSS3で行われます。 次のアニメーション コードが使用されました。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 /*チャート #2*/ /*最初の線の色、太さ、スタイル*/ .chart2 .ct-chart .ct-series .ct-series-a .ct-line ( ストローク: #949494 ; ストローク幅: 5px ; ) .chart2 .ct-chart .ct-series .ct-series-a .ct-point( ストローク: #656565 ; ) /*2 番目の線の色、太さ、スタイル*/ .chart2 .ct-chart 。 ct-series .ct-series-b .ct-line (ストローク: #6765B5 ; ストローク幅: 5px ; アニメーション: width-pulse 2s 無限; ) .chart2 .ct-chart .ct-series .ct-series-b .ct-point ( ストローク: #403CB5 ; ) /*3 番目の線の色、太さ、スタイル*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-line ( ストローク: #949494 ; )ストローク幅: 5px ; ) /*チャート上の 3 行目のポイントの色*/ .chart2 .ct-chart .ct-series .ct-series-c .ct-point( ストローク: #656565 ; ) / *チャート上のラインを強調表示する波紋アニメーション*/ @keyframes width-pulse ( 0% ( ストローク幅: 6px ; ストローク: #403CB5 ; ) 50% ( ストローク幅: 14px ; ストローク: #E40DE4 ; ) 100% ( ストローク幅: 6px ; ストローク: #403CB5 ; ))
例 3. 2 方向のアニメーション

CSS3 アニメーションを使用した最後の例は、チャート上の 2 方向のアニメーションです。

この効果を得るには、次の CSS コードとアニメーションを使用する必要があります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 /*チャート #3*/ /*2 番目の線の色、太さ、スタイル*/ .chart3 .ct-chart .ct-series .ct-series-b .ct-line ( ストローク: #E44A4A ; ストローク幅: 5px ; ストローク-dasharray: 30px 5px ; ストローク-ラインキャップ: ラウンド; アニメーション : ダシャーレイ-クレイジー 10s 無限リニア ; .ct-point( ストローク: #E40D0D ; ) /*最初の線の色、太さ、スタイル*/ .ct-chart .ct-series .ct-series-a .ct-line ( ストローク: #949494 ; ストローク幅: 5px ; ) /*チャートの最初の線のポイントの色*/ .chart3 .ct -chart .ct-series .ct-series-a .ct-point( ストローク: #656565 ; ) /*グラフィックス上の 2 方向のアニメーション*/ @keyframes dasharray-craziness ( 0% ( ストローク-dasharray: 7px 2px ; ) 80% (ストローク ダシャーレイ: 7px 100px ; ストローク幅: 10px ) 100% (ストローク ダシャーレイ: 7px 2px ; ) )

これらの例で、美しく、そして最も重要なことに、人目を引くチャートを作成するのは非常に簡単であることを示したかったのです。 少なくとも CSS3 アニメーションの基本を知っていれば十分です。 これについては、以下のリンクで読むことができます。

関連記事