Chart.jsを使用してデータをインタラクティブダイアグラムに変える

Sep 11, 2025

操作方法

ページ1/2：

チャートを使う：ステップ01-10

チャートを使う：ステップ01-10
チャートを使う：ステップ11-20

理論的には、ダイアグラムの作成は難しくありません。円グラフに必要な三角計の処理は、プログラマのトレーニングに使用される最も古典的な仕事の一つです。現時点で開発者の注意を払うために繰り広げられた図書館がたくさんありますが、この記事では、Open Source Tool Chart.jsを使用する方法に焦点を当てています。

ライブラリをそのペースを通して置き、ランダムに生成されたデータから印刷可能なダイアグラムのセットを作成します。 Chart.jsは特に人気があります Webデザインツール 使いやすさと高度な機能の間に独自のトレードオフを提供するので、インタラクティブチャートを作成し、魅力的にすることができます。 インフォグラフィック 。

Chart.jsでは、最小限の努力でWebサイトに追加するために、8つの異なるチャートタイプから選択できます。最近追加されたアニメーションモジュールは、スナッ光視界のビジュアルでダイアグラムを豊かにします。あなたのダイアグラムを収容するための新しいサイトの作成？あなたのものを手に入れる ウェブホスティング スポットオンし、必ずトップを試してください ウェブサイトビルダー 。さて、始めましょう。

各画像の右上にあるアイコンをクリックして拡大します。

01.ライブラリを展開します

Chart.jsの使用が広範囲にわたって、CloudFlareなどのさまざまなCDNからのその制限版を見つけることができます。単にAでロードするだけです ＆lt;スクリプト＆gt; タグ、そしてそのAを確実にする ＆lt;キャンバス＆gt。 オブジェクトは近くにあります - Chart.jsはこのウィジェットで提供されているレンダリングインフラストラクチャを使用してその魔法をします。

＆lt; html＆gt。
＆lt;頭＆gt;
＆lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
chart.min.js "＆gt;
＆lt;＆script＆gt。
＆lt; / gt;
＆lt; body＆gt;
＆lt;キャンバスID = "Workarea"＆Gt。
＆lt; /キャンバス＆gt。
＆lt; / body＆gt;
＆lt; / html＆gt;

02.初期化を開始します

First, load up the framework — まず、フレームワークをロードアップします

フレームワークがロードされると、次のステップではCANVAS2Dハンドルが指していることを含みます。 ＆lt;キャンバス＆gt。 前のステップで作成されたインスタンス。これは、その後の新しいインスタンスを作成するために使用できます。 チャート（） クラス。データ処理、レンダリング、および対話の責任があります。

＆lt;スクリプト＆gt。
（関数（） {
var ctx =ドキュメント。
getElementByID（ 'Workarea'）getContext（ '2d'）;
var chart =新しいチャート（CTX、
{
タイプ： '行'、
オプション：{}、
。 。 。
}）;）
}）（）;
＆script＆gt;

03.データソースを追加します

line chart — 私たちのラインチャートの場合、1つのデータセットだけが必要です

チャートクラスは1つ以上を提供するデータポインタを取ります データセット 実際の測定情報を含むオブジェクト。ラインチャートの場合は、1つのデータセットだけが必要です。必須データ要素と実際の表示プロセスを管理するいくつかのオプションパラメータが付属しています。

 var chart =新しいチャート（CTX、{
タイプ： '行'、
オプション：{}、
データ：{
ラベル：[「1月」、
「2月」、「3月」、「4月」、「5月」、「6月」、
「7月」
データセット：[{
レーベル： "私の最初のデータセット"、
背景色：
        'RGB（255,99,132）'、
ボーダの色：
'RGB（255,99,132）'、
データ：[0,10,5、
2,20,30,45]、
}
}
;

04.ちらつきを止める

Chart.jsには洗練されたリサイクライズロジックが付属しています。残念ながら、時々スクリーンサイズが間違っている傾向があります。のサイズを制限する ＆lt;キャンバス＆gt。 CSSを介した要素、悲しいことに、トリックはしません。代わりに、チャートクラスコンストラクタに付属のオプションフィールドを介してアスペクト比のメンテナンスと応答性の両方を無効にする必要があります。

＆lt; CANVAS ID = "Workarea" Style = "幅：800px;
高さ：600px; "＆lt; / canvas＆gt; / canvas＆gt;
＆lt;スクリプト＆gt;
（関数（） {
var ctx =ドキュメント。
getElementByID（ 'Workarea'）getContext（ '2d'）;
var chart =新しいチャート（CTX、
{
タイプ： '行'、

オプション：{
Responseve：False、MaintainSpectratio：

05.レイアウトを追加します

Andrei Tupolevの言い換えに：今すぐ小さい方が飛んでいるので、より大きなものを育てましょう。 1つのキャンバス要素を扱うのではなく、このステップの「乗算」に付随する足場 - 1つのキャンバス要素を使用する代わりに、それらのうちの合計4つを作成し、それらをレクロイオシロスコープと同様に画面上に配置します。悲しいことに、これは意図したとはまったくうまくいかない。

 CANVAS ID =「ワークエリア」
style = "position：絶対; top：0％;左：0％;
幅：49％。高さ：49％; "＆gt; / canvas＆gt; / canvas＆gt;
＆lt;キャンバスID = "Workarea2"
style = "位置：絶対; top：0％;左：51％;
幅：49％。高さ：49％; "＆gt; / canvas＆gt; / canvas＆gt;
＆lt;キャンバスID = "Workarea3"
Style = "Position：絶対; TOP：51％;左：0％;
幅：49％。高さ：49％; "＆gt; / canvas＆gt; / canvas＆gt;
＆lt;キャンバスID = "Workarea4"
Style = "Position：Absolute; TOP：51％;左：51％;
幅：49％。高さ：49％; "＆lt; / canvas＆gt; / canvas＆gt;

06.レンダリングエラーを扱います

Wrapper <div> tags enforce a structure from the outside — ラッパー＆lt; DIV＆GT。タグは外部からの構造を強制します

Chart.jsダイアグラムを複雑なレイアウトで処理するための最も安全な方法は、ラッパーを使用することを含みます ＆lt; div＆gt; タグそれらは外部から構造を強制し、それによって内部レイアウトエンジンが必要以上に害を及ぼさないことを確実にする。ただし、この場合は、応答性機能を再度有効にしてください。

＆lt; DIV STYLE = "位置：絶対;トップ：0％。左：
0％;幅：49％。高さ：49％ "＆gt;
＆lt;キャンバスID =「ワークエア」＆gt; / canvas＆gt; / lt;
キャンバス＆gt。
＆lt; / div＆gt;
＆lt; div style = "位置：絶対; TOP：0％。左：
51％幅：49％。高さ：49％ "＆gt;
＆lt;キャンバスID = "Workarea2"＆gt; / canvas＆gt; / lt;
キャンバス＆gt。
＆lt; / div＆gt;
＆lt; div style = "位置：絶対;上：51％;左：
0％;幅：49％。高さ：49％ "＆gt;
＆lt;キャンバスID = "Workarea3"＆lt; / canvas＆gt;＆lt;
キャンバス＆gt。
＆lt; / div＆gt;
＆lt; div style = "位置：絶対;上：51％;左：
51％幅：49％。高さ：49％ "＆gt;
＆lt;キャンバスID = "Workarea4"＆lt; / canvas＆gt;＆lt;
キャンバス＆gt。
＆lt; / div＆gt;
＆lt;スクリプト＆gt;
document.addeventListener（ "Domcontentl
OADED "、関数（）{
var ctx =ドキュメント。
getElementByID（ 'Workarea'）getContext（ '2d'）;
var chart = new
チャート（CTX、{
タイプ：
'ライン'、
オプション：
{}、

07.バーを試してください

Creating bar charts is simple — 棒グラフの作成は簡単です

ラインチャートを常にレンダリングするとすぐに退屈になります。 Typeプロパティをバーに変更することでうまくいって物事を上にしましょう。再利用を排除するために、データフィールドを「グローバル」スコープに宣伝します。

＆lt;スクリプト＆gt。
document.addeventListener（ "domcontentloaded"、function（）{
var myfield = {
ラベル：[「1月」、「2月」、「3月」、「4月」、「5月」、「6月」、「7月」
データセット：[{
ラベル：
「私の最初のデータセット」、

BackgroundColor： 'RGB（255,99,132）'、

BorderColor： 'RGB（255,99,132）'、
データ：[0,10,5,2,20,30,45]、
}
;;

。 。 。
CTX =ドキュメント
getElementByID（ 'Workarea4'）GetContext（ '2d'）;
チャート=新チャート（CTX、{
タイプ： 'bar'、
オプション：{}、
データ：マイフィールド
}）;）
}）;）
＆script＆gt;

08.ピースを避けます

pie charts taking over the screen — 円画面全体を埋めたくない場合は、円グラフが特別な扱いを必要とします。

理論的には、円グラフを同じ行に沿ってレンダリングすることができる。色の特性を取り除き、均一な外観を防ぎ、TYPEプロパティをPIEに設定します。悲しいことに、これは全くうまくいかない - 完了したら、円グラフは画面全体を埋めるでしょう。これは、2つのプロパティの「大きな」を使用してPIE RADIUSを決定するPIEレンダラーの専門分割によって引き起こされます。

 var mypie = {
ラベル：[「1月」、「2月」、「3月」、「4月」、「5月」、「6月」、「7月」
データセット：[{
レーベル： "私の最初のデータセット"、
データ：[0,10,5,2,20,30,45]、
}
;;
CTX = Document.GetElementById（ 'Workarea2'）。
getContext（ '2d'）;
チャート=新チャート（CTX、{
タイプ： 'Pie'、
オプション：{}、
データ：Mypie.
;

09.問題を解決します

手順1で作成した 'index.js'ファイルを開きます。

＆lt; Body＆GT;
＆lt; div style = "位置：絶対値。上：0％;
左：0％。幅：49％。高さ：49％ "＆gt;
＆lt;キャンバスID =「ワークエア」＆gt;＆lt;
キャンバス＆gt;＆lt; / canvas＆gt。
＆lt; / div＆gt;
＆lt; div style = "位置：絶対値。上：0％;
左：51％。幅：29％。高さ：49％ "＆gt;
＆lt;キャンバスID = "Workarea2"＆gt;＆lt;
キャンバス＆gt;＆lt; / canvas＆gt。
＆lt; / div＆gt;

10. thart.jsを図を再スケールさせましょう

問題を解決するためのもう1つのアプローチは、再度無効にすることです。 アスペクト比を維持 特徴。このようにして、ダイグラミングエンジンはそれがフィットすると見ながら図を再スケールすることが許され、円全体が画面上に表示されるようにします。

 CTX = Document.GetElementByID（ 'Workarea2'）。
getContext（ '2d'）;
チャート=新チャート（CTX、{
タイプ： 'Pie'、
オプション：{MaintainAspeCretatio：false
}、
データ：Mypie.
;

次のページ：Chart.jsでインタラクティブチャートの作成を終了

現在のページ：チャートを使う：ステップ01-10

次のページチャートを使う：ステップ11-20

Chart.jsを使用してデータをインタラクティブダイアグラムに変える

01.ライブラリを展開します

02.初期化を開始します

03.データソースを追加します

04.ちらつきを止める

05.レイアウトを追加します

06.レンダリングエラーを扱います

07.バーを試してください

08.ピースを避けます

09.問題を解決します

10. thart.jsを図を再スケールさせましょう

操作方法 - 最も人気のある記事

視点を描く方法

Unreal Engineで3D WASWOLFを作成する方法

ラインアートを使用して居心地の良いインテリアを作成する

Marvelとの完璧なプロトタイプとハンドオフデザイン

15ファンタジーポートレートのヒント

鉛筆でおいしいテクスチャを作る方法

クリップスタジオペイントでカスタムブラシを作成する

映画館のための世界を築く方法

カテゴリ