ChartJS-JavaScriptデータ視覚化ライブラリ

毎年、コンピューター技術の世界はますますグローバルなウェブに忍び込みます。 HTML5は地球を動き回っていますが、これまでのところ、開発と配布の速度が低下する兆候は見られませんでした。 冷蔵庫でさえHTML5をすぐに理解し始めるようです！



DevExpressでは、この傾向を他の誰にも感じません。 そして、今年は良い仕事をしました！



habrasocietyはすでに、 新しいPhoneJSフレームワークを知っています。これにより、経験豊富なWeb開発者がモバイルデバイスの開発に自信を持つことができます。



ただし、Web開発の古典的な側面を忘れていません。



人々はまだインターネットから情報を入手しています。

残念ながら、これらの同じ人々はまだ長くて退屈なレポートを読むのが好きではありません。

写真は千の言葉に値します。



それを見ている人と対話するライブ画像は貴重です。



Web開発者が顧客にライブチャートを表示できるように、 ChartJSデータ視覚化ライブラリを作成しました。

チャート？ しかし、それはすでに存在します！

もちろんあります。

しかし、常に努力し、改善すべきことがあります。



改善したいこと：

• グラフィックはクライアントでレンダリングする必要があります。 理由-クライアントで変更できるようにするため。
• スケジュールの作成は簡単でなければなりません。 グラフを作成するために100行のコードが必要な場合、これはもう少し多すぎます。
• ただし、タスクが発生した場合は、スケジュールを理想に追加します-解決できるはずです。 それだけが最初とは別に、そして革命ではなくコードの進化として解決されるべきです。
• 優雅さ。 データに基づいてグラフを描くとき-ryushechkiではなくデータを見たい。
• グラフィックはすべてのブラウザで動作するはずです。 そして特に、世界がどこに向かっているのかを考えると、モバイルデバイスで。
• 実際、データの視覚化はグラフだけではありません。 ライブラリには、値の視覚的評価を可能にする一連のゲージ（「インジケーター」）-視覚要素、およびフィルタリングやスケーリングなどのデータに対する操作を簡素化するRangeSelectorウィジェットも含まれています。

例

残念ながら、私は仕事と政治を混ぜないようにしていますので、「公共のイニシアチブ」でクールなスケジュールはありません。



インターネットの視聴者の関心を維持するために、実際には1つのオプションしかありません-子猫と一緒にグラフを描く！







猫が私たちを囲んでいます。 多くのキッチンでの会話は遅かれ早かれ、毛皮のようなお気に入りになります。



私は疑問に思った-実際、DevExpress'ovtsevがペットを飼っている割合は何ですか？ 彼らのお気に入りは何ですか、写真から理想の子猫にどれだけ似ていますか、それとも有名な漫画のサイモン猫を連想させますか？



思考は行動を生み出します。 同僚の間で小規模な調査が行われました。 もちろん、コミック-結局のところ、私たちはまだ子猫について話しているのです！ -しかし、いくつかの代表性への主張。



この調査の結果はナンバープレートです。



しかし、乾燥した数字の看板を見るのを本当に楽しんでいるのは特定の割合だけです（給与の伸びを示す表について話していないなら！）



写真でこのデータをよく見てみましょう。



主に開発に従事している会社の猫愛好家の割合はどのくらいですか？





（はい、すべての写真はクリック可能です、コードはこちらにあり、次のすべての例のコードを見つけることができます）



それほど多くはありませんが、他方では、それほど多くはありません-ほぼ4人に1人はすでに4本足の友人と家を共有しているか、またはその予定です。 そして、いくつか-そして一つではありません！



そして、これらの猫と猫は誰ですか？

世界では現在約7ダースの猫の品種があります。 ロシアでは約40の品種が見つかりますが、さらに少ない品種も広く見られます。 プログラマーと一緒に暮らすのはどんな猫ですか？ 他の何よりも多くですか？



この情報を表すために、最も単純なタイプのシリーズ（棒または棒グラフ）を使用できます。 紙の上のこのようなグラフは、1つの重要なポイントを与えません-一見、最も一般的な品種を決定することは不可能です、それが生きていると想像してください。 幸いなことに、最新のWebは完全に対話性とユーザーインタラクションの上に構築されています。 また、ChartJSを使用すると、ユーザーがグラフを操作したときに猫の写真を表示する機能を追加することはまったく難しくありません。





ここでプレイできます 。



そして、ここで、写真を見るとき、あなたは疑いや思考を必要としません-事実は印象的です：純血種の猫のいくつかのタイプは非常に人気があります（非常にエキゾチックな種もあります）-通常のグレーホワイトレッドは貴族の猫に対する着実な勝利猫と猫。



ところで、猫や猫はどうですか？

これも簡単に表示できます。猫と猫のデータを、2つのデータ系列を使用して表すことができる2つの個別の量として考えてみましょう。









猫または猫、そしてそれ以上の人が何人いるのかはすでにはっきりと見えています。 イギリスの猫の数とシャムの猫の数を比較できます。

しかし、その後、どの品種が全体的に多いかを見るのは少し悪くなりました。

チャートの改善を継続します-隣接するバーの代わりに、同じデータを積み上げバーの形で表示します：









ちなみに、正確な動物の数がまったく面白くなく、各品種内の比率のみが重要である場合、Full Stacked Barシリーズを使用して、数量の視覚的要素を完全に取り除くことができます。









最後の3つのグラフは、1行のコードのみが人間の知覚にどのように影響するかを示す優れた例です。 最小限のコードを使用して、ユーザーにいくつかの考えと結論を説得し、最も人気のある純血種とその後の英国品種の猫と猫の比率がほぼ同じであることを確認できます-これは最初のグラフには表示されませんでした。 しかし、最後に完全に失われた量で...



唯一の良い解決策は、ユーザーが見たいものと方法を自分で選択できるようにすることです。







グラフの種類を動的に変更するためのものであり、エジプトの括弧を数える3行のコードで実現できます。ChartJSを作成しました 。



数量は猫専用の唯一の指標ではありません。

たとえば、猫ファミリーの典型的な代表として同じ成功を収めた人はほとんどいないが、彼が過去24時間飢えていることを人々に納得させることができる。 多くの場合、猫が結果となり、体重の所有者に徐々に追いつきます。



DX猫の体重はいくらですか？ どの猫が最軽量で、どれが最も重いですか？ そして、それは品種に依存しますか？

各品種の平均体重と、それらの代表がどの程度到達するかを見てみましょう。 RangeBarおよびRangeAreaシリーズタイプは、範囲の表示に最適です。







（はい、残念ながら、いくつかの猫は単一のコピーに存在します。彼らにとって、平均体重は当然彼と一致します。サンプルコードはこちらです ）



どの品種が最も思いやりのある目を持つことができるかは、すでに徐々に明らかになってきています！

さて、または暗い路地で恐れるべき人...



もちろん、主なことは、猫に餌をやる際に極端なことはできないということを思い出すことです。 それどころか、黄金の平均を守る必要があります！







結局、食べ過ぎはキャラクターを損なう可能性があります...少なくとも特定の量の摂食が猫の気分にどのように影響するかを事前に評価する方がよいでしょう。







（サンプルコードはこちらです。サンプルを作成する際、データは著者の感情に基づいて選択されたものであり、1匹の動物が負傷したわけではありません！）



従業員間の猫の年齢の興味深い分布。 グラフには、若い猫への明確なジャンプがあります。 このピークでは、少し古い動物のスケジュールを詳細に検討することはできません。 ここでは、チャートをスケーリングする機能を使用できます。







グラフのスケーリングの例のコード。



深刻度をもう少し下げてみましょう！



家に現れて、猫は家全体を占有します。 彼女の滞​​在の痕跡はどこにでもあります。

平均的な猫は飼い主の衣服にどのくらいの毛を残していますか？ もちろん、原則としてそれが終了する場合...ゼロに等しい値だけでなく、そのような値がないことを視聴者に示す必要がある場合があるためです。







サンプルコードNULL値



さて、最後のポイントは、私たちの職業に特化した別の問題です。

お気に入りのホストプログラミング言語は、動物のネコ全体にどのように影響しますか？



さて、もちろんここでは、「ネコ」の概念を何らかの形で定量化する必要があります...いくつかの議論の後、2つの基準が選択されました。

1. 尾の長さ;
2. ゲーム中にオーナーが受け取ったスクラッチの数。

これらの2つの指標は異なる単位で測定されることを理解する必要があります-最初の単位はセンチメートル、2番目の単位は単位（ウェル、または数十単位）です。 それらを1つの軸に表示することは学術的に間違っています。

グラフに2番目の軸を追加し、最初のグラフをメイン軸に関連付け、2番目のグラフを追加したばかりの軸に関連付けます。

グラフを読みやすくするために、データを描画するのと同じ色でグラフを描画し、軸の1つをキャンバスの右端に転送することもできます。

この写真は次のとおりです。









写真からの結論は非常に興味深いものです。 C ++は、議論の余地のない尾の長さのリーダーです-そして、それは驚くことではありません！ Delphiはかなり予期せずそれに追従し、かなり予期せぬPhotoshopアクションスクリプトはトップ3を閉じます-デザインチームの猫がそれを試みたという強い疑念があります...ところで、彼らはクローフィールドでかなり自信を持って示しました... C＃猫！ これらは明らかに本物の動物です！



ただし、ここには問題があります。 グラフには平均値が表示されます。 おそらく、それらを分析して、手元に数字しかなかったでしょう。

グラフで、調査の値の分布のコリドーを追加すると、図が変わります。







C＃の平均値は、大きいものの、値の分布のほぼ最下部にあることがわかります。 つまり、C＃猫の大半は普通の人間の友人です。 1つ以上の猫のターミネーターがおそらく高い平均値の原因です。



これで、DX猫の簡単な視覚分析を締めくくりましょう。

そして、子猫のほかに、これらのチャートは何かに適していますか？

そう信じています。



もちろん、上記の私の分析はしばしば明らかにコミックでした。



しかし、私たちの猫の例を使用して、データの視覚化に対する非常に深刻なアプローチをいくつか示しました。 グラフ形式で表現されたデータが特定の数値の認識をどのように変化させ、グラフのタイプの変化がこれらの図を考慮する視点をどのように変化させるかを示します。



すべてのグラフは完全に活気があり、さまざまな形式でユーザーとの積極的な対話を可能にします。



グラフの種類の透過的な変更により、ユーザーは同じデータをさまざまな角度から見て、新しいパターンを導き出し、新たな結論に達することができます。



インジケータを使用してユーザーの選択を評価すると、ユーザーの注意を引き付け、決定の結果をより適切に表示できます。



広範囲のデータを評価し、小さな範囲内の局所的な変化を分析できるようにするには、グラフのスケーリングが必要になることがよくあります。



もちろん、私たちのライブラリは実際のプロジェクトで使用されています。

鋼の焼き戻し方法

アジャイル開発の原則に完全に準拠して、最初のイテレーションの後、ライブラリを近隣の部門の慈悲に委ねました。 実際のプロジェクトで使用し、人々からフィードバックを受け取ることほど、製品の開発に役立つものはありません。



技術サポート部門は、品質と速度を求める永遠の闘いに専念するWebサイトにそれらを組み込みました。 バグ追跡システムとの統合に使用されていた内部部門。 そして、テレビの各フロアのキッチンでは、部門ごとのバグ数とバグ数のダイナミクスのグラフでミニサイトが回転しています（これらのグラフとキッチンでの肝臓消費のグラフを比較したいという願望から長い間訪問されていますが、相関関係を判断します...） 。



したがって、できるだけ早くフィードバックを受け取ることができました。



受け取ったフィードバックに基づいて、ライブラリは拡張および拡張されました。



私たちのチーム自体も、パフォーマンス統計ツールでチャートを使用しています。 もちろん、C ++で書かれたC ++コンパイラーとはほど遠いですが、それでもいいです！



リリースに近づくと、ライブラリはより深刻なものに使用されるようになりました。 ライブラリ要素は、新しいDevExpress製品-ダッシュボードで使用され、財務データを含む大量のデータの分析専用です。 DevExpress Webサイトのダッシュボードの例 。



ChartJSウィジェットは、エンタープライズソリューションに適しているだけではありません。 ライブラリは腺とマイクロコントローラで非常にうまく機能します-virt2realソリューションと一連の気象センサーを組み合わせることで実証されました-結果はリアルタイムのグラフで著者のブログで利用できます。

ボンネットの下

インターネット上で興味深いものを見たかなり多くの人々（Habrを訪問）の反応は、興味深いものを右クリックして[要素の検査]を選択することです。



ネタバレをさせてください。



グラフのレンダリングには、SVGを使用します。 このテクノロジーは、ほとんどの最新のブラウザーでうまく機能します。ハードウェアアクセラレーションを使用することもあり、必要に応じてCSSスタイルシートを使用してスタイル設定することもできます。 レンダリングは、JavaScriptエンジンを長時間占有せず、ユーザーインターフェイスの応答性の低下を引き起こさないように、非同期的に複数の段階で実行できます。



「チャート」->「データ分析」->「企業セクター」->「windows xp」-> IE 8の仕様とチェーンのため、VMLテクノロジーを使用してこのブラウザーをサポートする以外に選択肢はありませんでした。 遷移は内部で発生し、ユーザーには見えません。



これは、チャート自体が依存性注入の原則に従って多くの点でアーキテクチャ的に設計されているという事実につながります（DRYとSOLIDも空の略語ではありません）。 私はこのアプローチの大ファンであり、強く推進しています。 JavaScriptの世界では、このアプローチにより、今後個別に説明する予定の興味深い機能がいくつか獲得されました。



各視覚要素は独立したオブジェクトとして実装され、入力でいくつかの依存オブジェクト（視覚および非視覚）を受け取ります。



画面座標を計算するためのほとんどすべての要素は、「translator」オブジェクトに依存しています。このオブジェクトのタスクは、サブジェクト領域の単位（「ビジネス値」）を画面のピクセルに変換することです。 したがって、この変換は複製されず、適切に分離されており、一元化された変更に容易に役立ちます（たとえば、チャートのズームを実行する場合）。



コンポーネント間の依存関係をグラフの形で表すと、かなりきれいな階層ピラミッドが表示されます-そして、「ウェブ」に滑り込まないように多くの努力をします。それは必然的に、修正が困難なコードで終わり、ユーザーにとっては最も単純な機能を待ちます。 すでに多くの興味深いものを提供していますが、まだ多くの計画があります！



純粋なJSからウィジェットを作成する古典的なアプローチに加えて、急速に成長しているKnockoutフレームワークを完全にサポートしています。これにより、MVVMアプローチを使用してHTML + JavaScriptアプリケーションを作成できます。 最も近いユースケースは、 PhoneJSで記述されたDXWorkoutアプリケーションです。

人々にとってアヘンはどれくらいですか？

あなたが愛好家であるならば、あなたが社会のために働いているなら、あなたがオープンソースプロジェクトを行っているなら、それはあなたにとって完全に無料になるでしょう。



商業プロジェクトがあり、私たちの図書館のおかげで、黄金の川があなたに流れます-商業利用のための価格を求めます。 これで何が得られますか？ 任意の数のサイトおよびプロジェクトでライブラリを使用する権利。 年間サブスクリプション期間中にサポートチームに無制限の質問を送信します。 ライブラリを製品と一緒に配布する機能（必要に応じて、ユーザーが修正および補足する場合もあります）は、ソースコードが公開されています。

どこで見たり試してみたりできますか？

ライブラリはChartJS Webサイトからダウンロードできます。



ChartJSデモギャラリーには多数の例が公開されており 、ウィジェットのさまざまな構成オプションに精通し、機能に精通し、オンラインでコードを操作できます。



このサイトでは、機能、方法、データ視覚化のアプローチ、正しいデータ表示の選択方法、および関連事項について説明するブログを定期的に発行します。



私はそこに子猫の存在を保証することはできませんが、これは非常に可能性が高いです。



みなさんの注意と良い気分に感謝します！

良い気分は常に深刻なことをするのに役立ちます。



PS素晴らしいサイトplacekitten.comは 、記事と例、ロシアのウィキペディアのセクションのいくつかの写真（ 猫に関する印象的なセクションがあります）、著者が見つからなかったいくつかの写真に使用されましたが、私は彼らに非常に感謝しています。 そしてさらに-時間を割かず、猫について教えてくれた同僚に。

サンプルはJSFiddleでホストされ、GitHubリポジトリで利用できます 。