Html5による大画面データビジュアライゼーション開発の実装

プロジェクトは、カンバンボードでデータ表示を行う必要があり、最初のタスクは、これは難しいことではないと思う受信し、美しいWebブラウザのフルスクリーンを行うことができます。しかし、それを行う過程で、私は問題に遭遇した。

まず：ブラウザは、水平および垂直スクロールバーを持つことができない、とマウスのスクロール処理はありません。

第二に：画面のサイズのすべての種類は、9ギガのスプライシング画面に完璧なディスプレイに加えて、ディスプレイのコンピュータ側の通常のユーザーを満たすためにあります。コンピュータの顧客の解像度は1399 * 768または1920 * 1080と解像度のサイズの他のタイプである可能性があります。

従来の上から下へのウェブ制作を使っても、もはや需要を満たせません。例えば

次の比較表は、一方は1902*1080、一方は1366*768の画面であり、解像度の高い画面はより多くのコンテンツを表示することが明らかである。

では、大画面で画面表示に合わせて動的に調整されるコンテンツでは、どうすればいいのでしょうか。

レスポンシブメディアクエリ、rem,jsによるサイズ制御、その他の方法？最初の思考は、応答性の高いメディアクエリが私のニーズを満たすことができるということです、確かにそれはコントロールを微調整することが可能ですが、時間が限られている、私は長い時間を過ごすことができない、と私は仕事の多くは、非常に多くの世話をする場所の多くのインタフェース要素を考えるサイズのCSSの複数のセットを記述することです。要するに、半日もつれました。

その後、DataVの基本的なバージョンを買って、開発を行いましたが、DataVのプログラマブルなタイプは、エンタープライズ版を購入するために多くの銀を過ごすために、高くはないです！また、DataVの基本的なバージョンを購入し、開発することができます。問題は、大画面を生成するためにH5の必要性に戻り、DataVの画面のフィットは非常に良いです、なぜそれから学ばない、F12は、ソースコードを表示し、体のスケールCSSプロパティを見て、おそらくアプローチを理解し、その後行うには開始されます。原則は、1920*1080などの基本サイズを使って開発とレイアウトを行い、最終的にクライアントブラウザのサイズを使用して、一定の計算比に従ってスケーリングを行うことです。

主なコードスニペット

from lib.datasets import GeneralDataset as Dataset
from lib.xvision import transforms
from lib.xvision.visualization import draw_image_by_points

この原理を利用して、大画面の開発を成功させました。

効果としては、以下のように、ブラウザを最小に縮めることです。

フルスクリーンで

今回は大画面でのHtml5データ可視化開発の実施についてご紹介しましたが、より関連するHtml5データ可視化コンテンツは、スクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後もよりスクリプトハウスを応援していただけると幸いです