チャート Bric オープンソースの Javascript ライブラリの力をもたらします チャート.js 〜へ Blocs。 のサポート付き バー, ライン, パイ, ドーナツ, 極性の & レーダー グラフの種類、これ Bric Web サイトにさまざまなデータを表示するために、さまざまな方法で使用できます。
チャート Bric には同梱されていません Blocs アプリケーションとは別に購入することができます こちら.
要件
チャート Bric MacOS 12 (Mojave) 以上が必要で、両方で動作します Blocs 4と5。
インストールする方法
すべてのアドオンをインストールできます Blocs 拡張機能マネージャーを使用します。 アドオンのインストールに慣れていない場合は、次の手順に従うことができます このガイド.
外観
外観コントロールは、グラフの外観を設定するために使用されます。
形式
スタイル ドロップダウンを使用して、グラフの視覚的なスタイルを選択できます。 バー、ライン、パイ、ドーナツ、ポーラーエリア、レーダーから選択できます。
レイアウト
レイアウト コントロールは、棒グラフと折れ線グラフのスタイルでのみ使用できます。このドロップダウンを使用して、グラフのレイアウトを垂直 (デフォルト) または水平に設定できます。 他のグラフ スタイルが選択されている場合、このコントロールは非表示になります。
背景色
このカラー ウェルは、チャートの背景色を設定するために使用できます。
文字の色
このカラー ウェルを使用して、グラフのテキストの色を設定できます。
枠の色
このカラー ウェルは、チャートの境界線の色を設定するために使用できます。
グリッドの色
このカラー ウェルを使用して、グラフのグリッドの色を設定できます。
伝説
凡例コントロールは、チャートの凡例の特性を設定するために使用されます。
役職
このドロップダウンは、凡例の位置を設定するために使用されます。 上、下、左、右のいずれかに設定できます。
凡例を表示
このチェックボックスは、チャートの凡例の表示を切り替えるために使用されます。
且つ
データ コントロールは、グラフに入力されるデータを設定するために使用されます。 作成しているグラフのスタイルによっては、単一のデータ セットと複数のデータ セットの両方を 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 に設定します。