棒グラフ、折れ線グラフ、もしくは円グラフを作成して、訪問者にわかりやすい形式でデータを表示します。

グラフ ブロックを使用して、サイト上でデータを視覚化します。グラフは、一連の異なるデータ間の関係をわかりやすく説明するのに適しています。棒グラフ、折れ線グラフ、円グラフを作成し、スタイルを設定できます。

グラフ ブロックは、Squarespace以外のプログラムで作成されたグラフの静止画像を埋め込むのに適した代替手段です。グラフは、複数の画面サイズでも見栄えがよくなるようにレスポンシブにサイズが変更され、いつでもデータを更新できます。

ヒント: このガイドでは、サイトにグラフを追加する方法について説明します。列と行を含む表を追加するには、カスタム コードを追加します。詳細については、Squarespace Forumのこちらの投稿を参照してください。

カスタム コードの変更は弊社サポートの範囲外です。これは、コード ベースのソリューションのセットアップやトラブルシューティングもサポート対象外であることを意味します。

始める前に

ExcelやGoogleスプレッドシートなどの表計算ソフトで.csv形式のデータを用意することをお勧めします。ブロック内のヘッダーに変換されるように、列と行にヘッダーがあることを確認してください。

グラフ ブロックを追加

グラフ ブロックを追加する方法は次の通りです。

1. ページまたは投稿を編集し、[ブロックを追加] または挿入箇所をクリックしてから、[グラフ] をクリックします。ヘルプについては、「ブロックを使用したコンテンツの追加」を参照してください。
2. ブロックの鉛筆アイコンをクリックして、ブロック エディターを開きます。
3. [棒グラフ]、[折れ線グラフ]、もしくは [円グラフ] をクリックします。グラフ エディターが開き、プレースホルダーのコンテンツとともにグラフのプレビューが表示されます。

4. データを追加するには、[データ] タブもしくは [インポート/エクスポート] タブを使用します。
5. [デザイン] タブを使用してグラフをデザインします。サイトがバージョン7.0の場合は、[適用] をクリックして変更を公開します。

各ステップの詳細については、以下のセクションに従ってください。

グラフ ブロックのレイアウト

各グラフ ブロック レイアウトの例を次に示します。グラフ ブロックの [デザイン] タブでレイアウトを変更できます。レイアウトを選択すると、そのプレビューがページに表示されます。新しいレイアウトに最適になるように、データを再フォーマットする必要がある場合があります。

データを追加する

グラフの種類を選択した後、[インポート/エクスポート] タブを使用して.csvからデータをインポートできます。もしくは [データ] タブでデータを手動で追加します。

注: 最大25行25列まで追加できます。数字のみを入力できます。エディターはすべてのドル記号 ($) を0に変換します。

Option 1 - Copy data from a .csv

データのスプレッドシートがある場合は、プレーン テキストの.csvファイルからコピー＆ペーストできます。特にデータが多く、ExcelやGoogleスプレッドシートでのスプレッドシートの作成に慣れている場合は、この方法をお勧めします。

Tip: In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

1. グラフ ブロック エディターを開いたままにしておきます。
2. In your spreadsheet program, save your data as a .csv file.
3. Open the file in a plain text editor like Notepad or TextEdit.
4. すべてを強調表示し、テキストをコピーします。
5. ブロック エディターで、[インポート/エクスポート] をクリックします。
6. グラフ データ フィールドのプレースホルダー データを削除します。
7. Paste the text you copied from the .csv.
8. [更新] をクリックし、表示されるメッセージ中の [確認] をクリックします。
9. The chart preview will refresh with new data.

[インポート/エクスポート] タブのデータは次のようになります。

Option 2 - Enter or edit data manually

ブロック エディターで行を一つずつ入力することで、最初からグラフを作成できます。既存のデータがない場合、またはグラフが非常に単純な場合は、このオプションを使用します。次の手順に従って、データをインポートした後に編集することもできます。

1. ブロック エディターの [データ] タブで、表示されるゴミ箱にプレースホルダーの行をドラッグ アンド ドロップして削除します。
2. 右上の [+] アイコンをクリックして、新しい列と列ヘッダーを追加します。円グラフ ブロックには、2つの列のみを含めることができます。
3. 新しい行と行ヘッダーを追加するには、左下の [+] アイコンをクリックします。
4. 新しいデータを入力したり、プレースホルダーのデータを置き換えたりするには、セル内をクリックします。すべてのセルに入力します。データを入力すると、グラフのプレビューが更新されます。

Tip: Navigate between cells and rows with the Tab key, just like in any spreadsheet program.

5. データのプロット方法を変更するには、[X軸とY軸を反転] をオンにします。円グラフ ブロックにはこれをお勧めしません。

書式設定のヒント

データのフォーマット方法は、使用するグラフ ブロックの種類によって異なります。各グラフのフォーマットの詳細は、次のヒントに従ってください。

グラフをデザインする

[デザイン] タブでは、カスタム テキストの追加、凡例の表示、カラー パレットの選択ができます。これらのデザイン オプションの詳細については、次の表を参照してください。

テキストのスタイルを設定する

サイト スタイルを使用して、ブロックのテキストのフォントと色を変更します。テキストのスタイルの設定方法は、サイトが使用されているSquarespaceのバージョンによって異なります。

グラフのデータをエクスポートする

Squarespace外の.csvファイルにデータをバックアップする方法は次の通りです。

1. [ページパネル] を開きます。
2. グラフ ブロックが表示されているページもしくは投稿で [編集] をクリックします。
3. グラフ ブロックをダブルクリックします。
4. [インポート/エクスポート] をクリックします。
5. グラフのデータ フィールドのデータをコピーします。
6. Paste the data into a plain text editor.
7. Save the file as a .csv. This converts the file into a spreadsheet.