チャート

Chart BricはオープンソースのJavascriptライブラリの力を発揮します チャート.js 〜へ Blocs。 のサポート付き バー, ライン, パイ, ドーナツ, 極性の とレーザー レーダー チャートの種類が豊富で、この Bric はさまざまな方法で使用して、Web サイトにさまざまなデータを表示できます。

チャートブリックは、 Blocs アプリケーションとは別に購入することができます (茶事の話はこちらをチェック).

要件

Chart BricはMacOS 12(Mojave)以上を必要とし、 Blocs 4と5。

インストールする方法

すべてのアドオンをインストールできます Blocs 拡張機能マネージャーを使用します。 アドオンのインストールに慣れていない場合は、次の手順に従うことができます このガイド.

外観

外観コントロールは、グラフの外観を設定するために使用されます。

形式

スタイル ドロップダウンを使用して、グラフの視覚的なスタイルを選択できます。 バー、ライン、パイ、ドーナツ、ポーラーエリア、レーダーから選択できます。

レイアウト

レイアウト コントロールは、棒グラフと折れ線グラフのスタイルでのみ使用できます。このドロップダウンを使用して、グラフのレイアウトを垂直 (デフォルト) または水平に設定できます。 他のグラフ スタイルが選択されている場合、このコントロールは非表示になります。

背景色

このカラー ウェルは、チャートの背景色を設定するために使用できます。

文字の色

このカラー ウェルを使用して、グラフのテキストの色を設定できます。

枠の色

このカラー ウェルは、チャートの境界線の色を設定するために使用できます。

グリッドの色

このカラー ウェルを使用して、グラフのグリッドの色を設定できます。

伝説

凡例コントロールは、チャートの凡例の特性を設定するために使用されます。

役職

このドロップダウンは、凡例の位置を設定するために使用されます。 上、下、左、右のいずれかに設定できます。

凡例を表示

このチェックボックスは、チャートの凡例の表示を切り替えるために使用されます。

Rescale データ

データ コントロールは、グラフに入力されるデータを設定するために使用されます。 作成しているグラフのスタイルによっては、単一のデータ セットと複数のデータ セットの両方を XNUMX つのグラフに取り込むことができます。

ラベル

このテキスト入力フィールドは、チャートの Y 軸の X の内容を入力するために使用されるラベル配列を設定するために使用されます。 この値は、[値] フィールドと同じ数のアイテムで構成されている必要があります。 各値はコンマで区切る必要があります。

ショートコードにラベルを付ける

Blocs 月や年などの一般的なデータ型のラベル配列をすばやく生成できます。 次の短いコードをラベル フィールドで使用すると、対応するラベル データをすばやく生成できます。たとえば、*q1 をラベル フィールドに入力すると、XNUMX 月、XNUMX 月、XNUMX 月が自動的に生成されます。

*月 = XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月、XNUMX 月

*q1 = XNUMX 月、XNUMX 月、XNUMX 月

*q2 = XNUMX 月、XNUMX 月、XNUMX 月

*q3 = XNUMX月、XNUMX月、XNUMX月

*q4 = XNUMX 月、XNUMX 月、XNUMX 月

*ソーシャル = Facebook、Instagram、LinkedIn、Reddit、SnapChat、TikTok、Twitter、Youtube

*クリプト = ビットコイン、イーサリアム、テザー、XRP、カルダノ、ドッジコイン、ソロナ、シブ、ライトコイン、ステラー

*ヨーロッパ = ヨーロッパ諸国のリスト

*状態 = アメリカの州のリスト

データセット

このドロップダウンを使用してデータ セットを選択し、適用される値と色を編集できます。 このオプションでは、追加のデータ セットを追加および削除することもできます。

ラベル

このテキスト フィールドを使用して、現在のデータ セットの凡例で使用されるラベルを設定できます。

価値観

このテキスト入力フィールドは、チャートのコンテンツを入力するために使用される現在のデータ セットの値配列を設定するために使用されます。 この値の配列は、Labels フィールドと同じ数の項目で構成されている必要があります。 各値はコンマで区切る必要があります。

塗りつぶしの色

このカラー ウェルは、データ セットの塗りつぶしの色を設定するために使用できます。 このオプションは、棒グラフ、折れ線グラフ、およびレーダー チャートでのみ使用できます。

枠の色

このカラー ウェルは、データ セットの境界線の色を設定するために使用できます。 このオプションは、棒グラフ、折れ線グラフ、およびレーダー チャートでのみ使用できます。

セグメントの色

このテキスト入力フィールドは、チャートのコンテンツを入力するために使用される現在のデータ セットの色値配列を設定するために使用されます。 この値の配列は、Labels フィールドと同じ数の項目で構成されている必要があります。 各値はコンマで区切る必要があります。 HEX または RGBA カラー値を使用できます。 このオプションは、円グラフ、ドーナツ グラフ、および極面グラフ スタイルでのみ使用できます。

HEX および RGBA カラー値の詳細を読むことができます (茶事の話はこちらをチェック).

スケールX

Scale X コントロールは、チャートの X 軸の外観をカスタマイズするために使用されます。

ラベル

このテキスト入力フィールドを使用して、チャートの X 軸のラベルを設定できます。

スケールを表示

このチェックボックスは、チャートの X 軸の詳細の表示を切り替えるために使用されます。

スケールY

スケール Y コントロールは、チャートの Y 軸の外観をカスタマイズするために使用されます。

ラベル

このテキスト入力フィールドを使用して、グラフの Y 軸のラベルを設定できます。

最小値

このテキスト入力フィールドを使用して、グラフの Y 軸の優先最小値を設定できます。 この値は数値である必要があり、正 (100) または負 (-100) のいずれかです。

最大値

このテキスト入力フィールドを使用して、グラフの Y 軸の優先最大値を設定できます。 この値は数値である必要があり、正 (100) または負 (-100) のいずれかです。

刻み幅

このテキスト入力フィールドを使用して、グラフの Y 軸の数値ステップ サイズを設定できます。 この値を変更すると、Y 軸上の数値に影響します。 デフォルトのステップ値は 20 です。これは、グラフが 20、20、40、60 のように 80 ずつ Y 軸にステップを表示することを意味します。 10、10、20、30、40、50、60。 この値は数値でなければなりません。

スケールを表示

このチェックボックスは、チャートの Y 軸の表示を切り替えるために使用されます。

アニメーション

アニメーション コントロールを使用して、ライブ Web サイトでチャートをプレビューするときにチャートをアニメーション化する方法をカスタマイズできます。

グラフ アニメーションは、プレビュー モードの場合、またはサイトがエクスポート/公開され、Web ブラウザー経由で読み込まれる場合にのみ表示できます。

ディレイ

このテキスト入力フィールドは、チャート アニメーションの遅延をカスタマイズするために使用されます。 値は数値である必要があり、ミリ秒単位で測定されます (例: 1000 = 1 秒)。

演奏時間

このテキスト入力フィールドは、チャート アニメーションの継続時間をカスタマイズするために使用されます。 値は数値である必要があり、ミリ秒単位で測定されます。たとえば、1000 = 1 秒です。グラフにアニメーションが必要ない場合は、この値を 0 に設定します。

15年2023月XNUMX日に更新

この記事は役に立ちましたか?

関連記事