チャート

チャートウィジェットカテゴリーには、以下のウィジェットが含まれます:

• 棒グラフ
  • 凡例付き棒グラフ
  • 積み上げ棒グラフ
  • 横棒グラフ
  • 複数系列グラフ
• ガントチャート
• ヒートグリッド
• 折れ線グラフ
• 円グラフ
• 散布図
• ツリーマップ

このページには、チャートウィジェットで利用できるプロパティやウィジェットの例、一般的なCSSに関する情報が掲載されています。

チャートウィジェットプロパティ

以下の表は、チャートウィジェットで利用できるプロパティの使用方法の詳細を提供します。

IAxis

IAreaSelection

IDatasetModel

ILabelsModel

IRangeDatasetModel

IXYDatasetModel

IHover

IDataSelection

アクション

チャートウィジェットの例

デフォルト

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  "animate": true, // アニメーションを有効にします
  "areaSelectionEnabled": false, // 領域選択を無効にします
  "dataSelectionEnabled": false, // データ選択を無効にします
  "datasets": [ // データセットの配列
    {
      "name": "dataset1", // データセットの名前
      "renderer": "line", // レンダラーの種類（この場合は線）
      "xValues": [], // x軸の値
      "yValues": [] // y軸の値
    }
  ],
  "labelsEnabled": false, // ラベルを無効にします
  "panZoomEnabled": false, // パンズームを無効にします
  "tooltipsEnabled": false, // ツールチップを無効にします
  "xAxes": [ // x軸の設定
    {
      "gridlinesEnabled": false, // グリッドラインを無効にします
      "name": "x1", // x軸の名前
      "position": "bottom", // x軸の位置
      "scale": "linear" // x軸のスケールタイプ
    }
  ],
  "yAxes": [ // y軸の設定
    {
      "gridlinesEnabled": false, // グリッドラインを無効にします
      "name": "y1", // y軸の名前
      "scale": "linear", // y軸のスケールタイプ
      "position": "left" // y軸の位置
    }
  ]
}

凡例付き棒グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "animate": true, // アニメーション有効
  "areaSelectionEnabled": false, // 領域選択無効
  "dataSelectionEnabled": false, // データ選択無効
  "datasets": [
    {
      "name": "dataset1", // データセット名
      "renderer": "bar", // 描画タイプ：棒グラフ
      "xValues": "{{query1.state}}", // x軸の値：州
      "yValues": "{{query1.avgIncome}}" // y軸の値：平均収入
    }
  ],
  "labelsEnabled": false, // ラベル無効
  "legendPosition": "top", // 凡例の位置：上部
  "panZoomEnabled": false, // パンズーム無効
  "tooltipsEnabled": false, // ツールチップ無効
  "xAxes": [
    {
      "gridlinesEnabled": false, // グリッドライン無効
      "name": "x1", // x軸名
      "position": "bottom", // x軸の位置：下部
      "label": "State", // x軸のラベル：州
      "scale": "category" // x軸のスケール：カテゴリ
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false, // グリッドライン無効
      "name": "y1", // y軸名
      "formatter": "$0,0.00", // y軸のフォーマット：ドル表示
      "position": "left", // y軸の位置：左部
      "label": "Average Income ($)", // y軸のラベル：平均収入（ドル）
      "scale": "linear", // y軸のスケール：線形
      "scaleMax": 1000000, // y軸の最大値
      "scaleMin": 10000 // y軸の最小値
    }
  ]
}

積み上げ棒グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "animate": true,  // アニメーションを有効にする
  "areaSelectionEnabled": false,  // 領域選択を無効にする
  "dataSelectionEnabled": false,  // データ選択を無効にする
  "datasets": [  // データセットのリスト
    {
      "name": "dataset1",  // データセットの名前
      "renderer": "stackedBar",  // 描画方法を指定する
      "seriesValues": "{{query1.gender}}",  // シリーズの値を指定する
      "xValues": "{{query1.state}}",  // x軸の値を指定する
      "yValues": "{{query1.avgIncome}}"  // y軸の値を指定する
    }
  ],
  "labelsEnabled": false,  // ラベルを無効にする
  "panZoomEnabled": false,  // パンズームを無効にする
  "tooltipsEnabled": false,  // ツールチップを無効にする
  "xAxes": [  // x軸の設定
    {
      "gridlinesEnabled": false,  // グリッドラインを無効にする
      "name": "x1",  // 軸の名前
      "position": "bottom",  // 軸の位置を指定する
      "label": "State",  // 軸のラベル
      "scale": "category"  // 軸のスケールタイプ
    }
  ],
  "yAxes": [  // y軸の設定
    {
      "gridlinesEnabled": false,  // グリッドラインを無効にする
      "name": "y1",  // 軸の名前
      "formatter": "$0,0.00",  // フォーマッターを指定する
      "position": "left",  // 軸の位置を指定する
      "label": "Average Income ($)",  // 軸のラベル
      "scale": "linear",  // 軸のスケールタイプ
      "scaleMax": 1000000,  // スケールの最大値
      "scaleMin": 10000  // スケールの最小値
    }
  ]
}

横棒グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "animate": true,  // アニメーションするかどうかを指定します。trueならする。
  "areaSelectionEnabled": false,  // 領域選択を有効にするかどうかを指定します。falseなら無効にします。
  "dataSelectionEnabled": false,  // データ選択を有効にするかどうかを指定します。falseなら無効にします。
  "datasets": [ // データセットのリストを指定します。
    {
      "name": "dataset1", // データセットの名前を指定します。
      "renderer": "horizontalBar", // データセットの描画方式を指定します。この場合は水平バーを使用します。
      "xValues": "{{query1.avgIncome}}", // x軸の値を指定します。この場合は平均収入。
      "yValues": "{{query1.state}}" // y軸の値を指定します。この場合は状態。
    }
  ],
  "labelsEnabled": false, // ラベルを有効にするかどうかを指定します。falseなら無効にします。
  "panZoomEnabled": false, // パンズームを有効にするかどうかを指定します。falseなら無効にします。
  "tooltipsEnabled": false, // ツールチップを有効にするかどうかを指定します。falseなら無効にします。
  "xAxes": [ // x軸の設定をリストで指定します。
    {
      "gridlinesEnabled": false, // グリッドラインを有効にするかどうかを指定します。falseなら無効にします。
      "name": "x1", // x軸の名前を指定します。
      "position": "bottom", // x軸の位置を指定します。この場合は下部に配置します。
      "label": "Average Income ($)", // x軸のラベルを指定します。この場合は「平均収入」。
      "scale": "linear", // x軸のスケールタイプを指定します。この場合は線形スケール。
    }
  ],
  "yAxes": [ // y軸の設定をリストで指定します。
    {
      "gridlinesEnabled": false, // グリッドラインを有効にするかどうかを指定します。falseなら無効にします。
      "name": "y1", // y軸の名前を指定します。
      "position": "left", // y軸の位置を指定します。この場合は左側に配置します。
      "label": "State", // y軸のラベルを指定します。この場合は「状態」。
      "scale": "category" // y軸のスケールタイプを指定します。この場合はカテゴリスケール。
    }
  ]
}

複数系列チャート

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
  // 領域選択の有効化 (trueで有効、falseで無効)
  "areaSelectionEnabled": false,
  // データ選択の有効化 (trueで有効、falseで無効)
  "dataSelectionEnabled": false,
  // データセットの設定
  "datasets": [
    {
      "name": "dataset1",
      // レンダリングタイプ (line: 折れ線グラフ)
      "renderer": "line",
      // シリーズの値
      "seriesValues": "{{query1.series}}",
      // X軸の値
      "xValues": "{{query1.key}}",
      // Y軸の値
      "yValues": "{{query1.doc_count}}"
    }
  ],
  // ラベルの有効化 (trueで有効、falseで無効)
  "labelsEnabled": false,
  // パンズームの有効化 (trueで有効、falseで無効)
  "panZoomEnabled": false,
  // ツールチップの有効化 (trueで有効、falseで無効)
  "tooltipsEnabled": false,
  // X軸の設定
  "xAxes": [
    {
      // グリッド線の有効化 (trueで有効、falseで無効)
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      // スケールタイプ (linear: 線形スケール)
      "scale": "linear"
    }
  ],
  // Y軸の設定
  "yAxes": [
    {
      // グリッド線の有効化 (trueで有効、falseで無効)
      "gridlinesEnabled": false,
      "name": "y1",
      // スケールタイプ (linear: 線形スケール)
      "scale": "linear",
      "position": "left"
    }
  ]
}

散布図

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "animate": true, // アニメーションを有効にする
  "areaSelectionEnabled": false, // 領域選択を無効にする
  "dataSelectionEnabled": false, // データ選択を無効にする
  "datasets": [
    {
      "name": "dataset1", // データセットの名前
      "radiusValues": "{{query1.pop}}", // 半径の値
      "renderer": "scatter", // レンダラーのタイプ
      "xValues": "{{query1.gdp}}", // x軸の値
      "yValues": "{{query1.cpi}}" // y軸の値
    }
  ],
  "labelsEnabled": false, // ラベルを無効にする
  "panZoomEnabled": false, // パンズームを無効にする
  "tooltipsEnabled": false, // ツールチップを無効にする
  "xAxes": [
    {
      "gridlinesEnabled": false, // グリッドラインを無効にする
      "name": "x1", // 軸の名前
      "position": "bottom", // 軸の位置
      "scale": "linear" // スケールの種類
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false, // グリッドラインを無効にする
      "name": "y1", // 軸の名前
      "scale": "linear", // スケールの種類
      "position": "left" // 軸の位置
    }
  ]
}

チュートリアル：散布図ウィジェットの追加

距離と時間の値を示すルートメトリクスを表示する散布図ウィジェットを作成したいとします。左上隅の ウィジェット ボタンを選択し、チャート > 散布図 を選択して、Scatter Plot ウィジェットをアプリケーションに追加します。続行する前に、右のエディタパネルからサンプルデータをクリアできます。

まず、チャートウィジェットの名前を w_routeMetrics のようにわかりやすいものに変更します。

x軸にはルートの平均距離をプロットしたいので、X Values を "{{q_routeMetrics.avg_distance}}" に設定する必要があります。

次に、y軸にルートの所要時間をプロットします。データ タブの Y Values を "{{q_routeMetrics.avg_time}}" に設定します。

散布図を読みやすくするために、軸にラベルを追加します。Axes タブを選択し、最初の X Axes オブジェクトの Name を x1 から Distance に変更し、プロットされた情報を説明するために Distance (miles) のようなラベルを追加します。また、グリッド線をオンにして、各ポイントがチャート上のどこにあるかを特定するのに役立てることもできます。

Y Axis の名前を Duration に変更し、以下のように設定します。

最後に、ポイントに異なるサイズを設定します。ルートの混雑具合によってポイントの大きさを変えたいので、Data タブに戻って Radius を "{{q_routeMetrics.num_flights}}" に設定します。

チャートをもう一度調べます。何かおかしいことに気付くでしょう。チャートがいっぱいになってしまっています。これは、Radius 値が提供された値と半径のピクセル数との間で1:1の描画を行っているためで、ルートには 150 以上のフライトがあるものもあります。半径値をスケーリングする必要があります。これは、クエリ内で "表示" 値を計算することで行うことができます。これをハードコーディングすることもできますが、Variable を使用すると、後でクエリを編集せずに簡単に変更を加えることができます。

上部のバーで Variables タブを選択して Variables ウィンドウを開きます。右下で新しい変数を作成します。新しい変数の名前を v_routeCountDisplayScale に設定し、値を 100 に設定します。

q_routeMetrics ウィジェットに戻り、新しい行を追加します。

COUNT(flight_id)/{{v_routeCountDisplayScale}} as num_flights_disp

ここで、各行に表示用のラベルを生成します。

CONCAT(origin, ' -> ', dest) as route_name

クエリ全体が以下のようになります。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
SELECT
    origin,  -- 出発地
    dest,  -- 目的地
    AVG(distance) as avg_distance,  -- 平均距離
    AVG(actual_elapsed_time) as avg_time,  -- 平均所要時間
    COUNT(flight_id) as num_flights,  -- フライト数
    COUNT(flight_id)/{{v_routeCountDisplayScale}} as num_flights_disp,  -- ディスプレイ用のフライト数（表示スケールによる調整後）
    CONCAT(origin, ' -> ', dest) as route_name  -- ルート名
FROM "foundry_sync"."{{v_flightTable}}"  -- フライトテーブルからデータを取得
GROUP BY
    origin,  -- 出発地でグループ化
    dest  -- 目的地でグループ化
ORDER BY
    COUNT(flight_id) DESC  -- フライト数の多い順に並べ替え
LIMIT 50  -- 上位50件を表示

w_routeMetrics ウィジェットに戻り、Radius 設定を num_flights から num_flights_disp 行に参照を変更します。

チャートを完成させるために、w_routeMetrics 設定パネルの上部にある Title 入力欄に Route Metrics タイトルを追加します。

次のようなアプリケーションになるはずです：

X と Y の範囲を持つ折れ線グラフ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  "animate": true, // アニメーションを有効にする
  "areaSelectionEnabled": false, // 領域選択を無効にする
  "dataSelectionEnabled": false, // データ選択を無効にする
  "datasets": [
    {
      "name": "dataset1", // データセット1の名前
      "renderer": "line", // レンダラーの種類（線）
      "xValues": [1,2,3,4,5,6,7,8,9], // x値
      "yValues": [3,4,1,4,5,4,2,4,1], // y値
      "seriesValues": null, // シリーズ値
      "xAxisName": "x1", // x軸の名前
      "yAxisName": "y1" // y軸の名前
    },
    {
      "endValues": [3], // 終了値
      "name": "dataset2", // データセット2の名前
      "renderer": "yRange", // レンダラーの種類（y範囲）
      "startValues": [2] // 開始値
    },
    {
      "endValues": [3.5,8], // 終了値
      "name": "dataset3", // データセット3の名前
      "renderer": "xRange", // レンダラーの種類（x範囲）
      "startValues": [2.5,6], // 開始値
      "seriesValues": ["Range A","Range B"] // シリーズ値
    }
  ],
  "labelsEnabled": false, // ラベルを無効にする
  "panZoomEnabled": false, // パンズームを無効にする
  "tooltipsEnabled": false, // ツールチップを無効にする
  "xAxes": [
    {
      "gridlinesEnabled": true, // グリッドラインを有効にする
      "name": "x1", // x軸の名前
      "position": "bottom", // 位置（下）
      "scale": "linear", // スケール（線形）
      "label": "", // ラベル
      "formatter": "\"0\"" // フォーマッター
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false, // グリッドラインを無効にする
      "name": "y1", // y軸の名前
      "position": "left", // 位置（左）
      "scale": "linear", // スケール（線形）
      "formatter": "\"0\"" // フォーマッター
    }
  ]
}

---

ヒートグリッド

以下の表では、ヒートグリッドチャートウィジェットで利用可能なプロパティに関する使用詳細を提供しています。いくつかの例が表の後に続きます。

プロパティ

IAxis

IHeatGridModel

IHeatGridSelection

アクション

デフォルト設定

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "cellValues": [], // セルの値
    "colorScale": ["#B9D7EA", "#1F6B9A"], // 色のスケール
    "labelsEnabled": false, // ラベルの表示有無
    "xAxis": {
        "gridlinesEnabled": false, // グリッド線の表示有無
        "name": "x1", // x軸の名前
        "position": "bottom", // x軸の位置
        "scale": "category", // x軸のスケール
        "visible": true // x軸の表示有無
    },
    "xValues": [], // x軸の値
    "yAxis": {
        "gridlinesEnabled": false, // グリッド線の表示有無
        "name": "y1", // y軸の名前
        "position": "bottom", // y軸の位置
        "scale": "category", // y軸のスケール
        "visible": true // y軸の表示有無
    },
    "yValues": [] // y軸の値
}

---

円グラフ

以下の表は、円グラフウィジェットで利用可能なプロパティについての使用詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

IPieHover

IPieSelection

アクション

例

パイプロット

Copied!
1
2
3
4
5
6
7
8
{
  "keys": "{{query1.teamName}}",  // チーム名を指定するキー。これはクエリ1の結果から取得します。
  "labelsEnabled": false,  // ラベルを有効にするかどうかを示す。ここでは、ラベルは無効に設定されています。
  "legendPosition": "right",  // 凡例の位置を示す。ここでは、凡例は右側に設定されています。
  "selectionEnabled": false,  // 選択を有効にするかどうかを示す。ここでは、選択は無効に設定されています。
  "tooltipsEnabled": false,  // ツールチップを有効にするかどうかを示す。ここでは、ツールチップは無効に設定されています。
  "values": "{{query1.headCount}}"  // 値を指定するキー。これはクエリ1の結果から取得します。
}

ドーナツプロット

Copied!
1
2
3
4
5
6
7
8
9
{
  "innerPadding": 0.6, // 内側の余白
  "keys": "{{query1.teamName}}", // キー（チーム名）
  "labelsEnabled": false, // ラベル表示の有効無効
  "legendPosition": "right", // 凡例の位置
  "selectionEnabled": false, // 選択の有効無効
  "tooltipsEnabled": false, // ツールチップの有効無効
  "values": "{{query1.headCount}}" // 値（人数）
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
{
  "keys": [], // キー
  "labelsEnabled": false, // ラベル表示の有効化
  "legendPosition": "right", // 凡例の位置
  "selectionEnabled": false, // 選択の有効化
  "tooltipsEnabled": false, // ツールチップの有効化
  "values": [] // 値
}

---

ツリーマップ

ツリーマップウィジェットは、ネストされた長方形のセットで階層データを視覚化する柔軟な方法を提供します。それは他の視覚化では見つけにくいパターンを見つけるのに役立ちます。

ツリーマップは、特定のエンティティ（label）の絶対量（size）を視覚化するために使用され、これはいくつかの（オプションの）category の一部であり、いくつかの（オプションの）相対量（density）を持つかもしれません。 各セルの長方形には、size に比例する面積、density と category によって定義された色、そして label によって与えられた名前があります。

このチャートで視覚化できるデータセットの例は以下の通りです：

• 市場（size）の一部を占め、一部の価格変動率（density）を持つ業界（category）の一部である株式（label）

• 一部の商品（size）を生産し、偽陽性の比率（density）を持つ地域（category）による工場の場所（label）

• ストレージスペース（size）を持ち、一部のパーセンテージのストレージスペース利用率（density）を持つクラスタのノード（label）

• 世界の地域（category）に属する国（label）の人口（size）

データ設定

• label（オプション）：各セルに表示される名前
• size：セルの長方形のサイズを決定します
• density（オプション）：セルの色の陰影を決定します
• category（オプション）：セルのグループ化を決定し、セルの色を決定します

デフォルトの例では、セルの長方形はセルのsizeに対応しています。「I」と「II」の2つのカテゴリーがあります。「H」は最大のサイズ（45）を持つため、最大の長方形となります。「H」はまた最小の密度（3）を持つため、最も暗い色となります（色のパネルの下のチェックボックスでグラデーションを反転させることができます）。

色設定

categories と/または densities が有効化されているかどうかに基づいて、異なる色設定が利用可能です。

カテゴリー有効と密度有効

categories と densities の両方が有効化されている場合、セルの色はHue-Saturation-Value (HSV) 色空間のグラデーションによって定義されます。各カテゴリーには色相が定義されています。色相のリスト（0から360までの数字）またはカテゴリー名を色相にマッピングする辞書を提供できます。すべてのカテゴリーのグラデーションは、定義された開始彩度と値を使用します。グラデーションは、グラデーションタイプ（明るく、暗く、飽和、脱色）とグラデーションの強度を使用して定義されます。

カテゴリーのみ有効

categories のみが有効化されている場合、カテゴリーのために色のリストまたはカテゴリー名を色にマッピングする辞書を指定できます。

色は16進数（#FF0000、#00FF00）または標準（例：赤、緑）であることができます。

密度のみ有効

densities のみが有効化されている場合、グラデーションとして範囲に適用される色のリストを定義できます。色のグラデーションを定義するためには、最低でも2つの色を提供する必要がありますが、この色のグラデーションをより細かく定義するためにはより多くの色を提供できます。

色は16進数（#FF0000、#00FF00）または標準（例：赤、緑）であることができます。

カテゴリー無効と密度無効

categories と densities の両方が無効化されている場合、データポイントの数と同じ長さの色のリストである色のパレットを定義できます。

色は16進数（#FF0000、#00FF00）または標準（例：赤、緑）であることができます。

その他の設定

オプションのその他の設定が可能です：

• セルのスタイリング

  • 各セルの境界線の幅
  • 境界線の色
  • セルのラベル
  • セルのツールチップ

• 凡例

  • 凡例の位置（上、下、左、右）
  • 凡例のラベル（凡例のタイトル）

• セルが生成される方法に対するタイリング戦略。タイリング戦略は、d3 によって定義されています：バイナリ、ダイス、リスクエリファイ、スライス、スライスダイス、スクエアリファイ。

• 選択（複数または単一）

例

これらの一連の例では、投資家が自分のポートフォリオの保有株を視覚化したいと考えています。データにはいくつかの次元があります：株式の名前（label）、各株式に投資された金額（size）、株価のパーセント変動（density）、株式の業界（category）。

このデータをツリーマップチャートウィジェットに読み込みます：

Copied!
1
2
3
4
5
6
7
8
9
10
11
// ラベル：各企業のティッカーシンボル（株式市場での略称）
labels: ["MSFT", "AAPL", "NFLX", "AMZN", "GS", "MS", "BLK", "JPM", "XOM", "BP"]

// サイズ：各企業の何らかの数値（例えば、市場価値や売上など）
sizes: [10, 20, 5, 25, 8, 15, 18, 30, 10, 40]

// 密度：各企業の何らかの数値（例えば、株価や収益など）
densities: [8, 15, -10, 10, 3, -5, -3, 4, 20, 8]

// カテゴリ：各企業の業種
categories: ["Tech", "Tech", "Tech", "Tech", "Finance", "Finance", "Finance", "Finance", "Energy", "Energy"]

カテゴリーと密度が有効な例 1

密度のみが有効な例 2

この設定では、ポートフォリオアナリストは価格の大きな変動を経験した株式を見ることができます。

カテゴリーのみが有効な例 3

この設定では、ポートフォリオアナリストはポートフォリオ内で最も代表的な業界と、その業界内で最も大きな保有株式を調べることができます。

データのより詳細な表現を提供するために設定を使用できることに注意してください。たとえば、ポートフォリオ内の株式のサイズを視覚化し、それらを赤、アンバー、グリーンのリスク評価によって色付けすることができます。

カテゴリーと密度が無効な例 4

この設定では、ポートフォリオアナリストは単純に各株式がポートフォリオのどの程度を占めているかを見ることになります。これはデフォルトでは実質的に円グラフと同じです。

カスタムカラー戦略が必要な場合（デフォルトの設定可能なものを超えて）、各四角形の色を個別に提供することで、この設定を使用できることに注意してください。

---

共通の CSS

ラインチャート

シリーズの色：

Copied!
1
2
3
4
5
/* .line-plotクラスと.render-areaクラスを持つ要素内のg要素の1番目のpath要素の線の色を#6a2d9fに設定します。 */
.line-plot .render-area g:nth-of-type(1) path {stroke: #6a2d9f;}

/* .line-plotクラスと.render-areaクラスを持つ要素内のg要素の2番目のpath要素の線の色を#c993f1に設定します。 */
.line-plot .render-area g:nth-of-type(2) path {stroke:#c993f1;}

凡例の色：

Copied!
1
2
/* レジェンド内の各行の最初のエントリーのパスの色を#6a2d9f（紫色）に設定します。 */
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #6a2d9f;}

別の方法として、

Copied!
1
2
/* 凡例の2番目のエントリの色を設定 */
.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #c993f1;}

棒グラフ

以下は、積み上げ、クラスター、および通常の棒グラフに適用されます。

棒の色：

Copied!
1
2
3
4
5
/* ".bar-plot .render-area g:nth-of-type(1) rect" および ".bar-plot:nth-of-type(1) .render-area rect" セレクタに対応する要素は、塗りつぶし色として #6a2d9f (深紫色) を使用します */
.bar-plot .render-area g:nth-of-type(1) rect,.bar-plot:nth-of-type(1) .render-area rect {fill: #6a2d9f;}

/* ".bar-plot .render-area g:nth-of-type(2) rect" および ".bar-plot:nth-of-type(2) .render-area rect" セレクタに対応する要素は、塗りつぶし色として #c993f1 (薄紫色) を使用します */
.bar-plot .render-area g:nth-of-type(2) rect,.bar-plot:nth-of-type(2) .render-area rect {fill: #c993f1;}

凡例の色：

Copied!
1
2
3
4
5
6
7
8
9
10
/* 伝説の1つ目のエントリの塗りつぶし色を設定 */
.legend .legend-row .legend-entry:nth-of-type(1) path {
  fill: #6a2d9f;
}

/* 伝説の2つ目のエントリと、コンテンツの2つ目の伝説の行の塗りつぶし色を設定 */
.legend .legend-row .legend-entry:nth-of-type(2) path,
.legend .content .legend-row:nth-of-type(2) path {
  fill: #c993f1;
}

エリアチャート

以下は、積み上げ型および通常のエリアチャートに適用されます。

エリアの色:

Copied!
1
2
3
4
5
6
7
8
9
10
11
/* 
エリアプロットのレンダリングエリア内の最初のパス要素と、最初のエリアプロットのパス要素の塗りつぶし色を設定します。
色の値は#009900です。
*/
.area-plot .render-area  g:nth-of-type(1) path,.area-plot:nth-of-type(1) path {fill: #009900;}

/* 
エリアプロットのレンダリングエリア内の2番目のパス要素と、2番目のエリアプロットのパス要素の塗りつぶし色を設定します。
色の値は#99CC00です。
*/
.area-plot .render-area  g:nth-of-type(2) path,.area-plot:nth-of-type(2) path {fill: #99CC00;}

線の色:

Copied!
1
2
3
4
5
/*:nth-of-type(1)は、特定のタイプの要素の中で、特定の位置にあるものを選択します。この場合、.area-plotというクラスを持つ要素のうち、最初の要素、および、.line-plot .render-area gの最初の要素のパスの色を#009900に設定しています。*/
.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(1) path {stroke: #009900;}

/*同様に、.area-plotというクラスを持つ要素のうち、最初の要素、および、.line-plot .render-area gの2番目の要素のパスの色を#99CC00に設定しています。*/
.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(2) path {stroke: #99CC00;}

凡例の色:

Copied!
1
2
3
4
/* ".legend .legend-row .legend-entry:nth-of-type(1) path" というセレクタで、
ドキュメント内の特定のpath要素を対象にします。具体的には、"legend"クラスを持つ要素の子孫で、
"legend-row"クラスを持つ要素の子孫で、"legend-entry"クラスを持ち、その中で1番目の要素のpathを指定します。 */
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #009900;}

あるいは:

Copied!
1
2
3
4
5
6
7
8
/* 
  日本語のコメント:
  凡例の2番目のエントリと、コンテンツ内の2番目のエントリの塗りつぶし色を#99CC00に設定します。
*/
.legend .legend-row .legend-entry:nth-of-type(2) path,
.legend .content .legend-row:nth-of-type(2) path {
  fill: #99CC00;
}

パイチャート

スライスは、インデックスまたはCSSクラス名（サニタイズされたラベル名がCSSクラス名として使用されます）で選択できます。

インデックスによるスタイリング：

パイスライスの色：

Copied!
1
2
/* パイチャートの描画エリアの最初のアークの塗りつぶし色を#009900に設定 */
.pie-plot .render-area .arc:nth-of-type(1) {fill: #009900;}

あるいは:

Copied!
1
2
/* .arcクラスを持つ要素の2番目に対して色を設定します。色は#99CC00です。 */
.arc:nth-of-type(2) { fill: #99CC00; }

凡例の色:

Copied!
1
2
3
4
5
/* sl-pieクラス内の.legendクラスの.legend-rowクラスの1番目のpath要素の塗りつぶし色を#009900に設定します。*/
sl-pie .legend .legend-row:nth-of-type(1) path { fill: #009900; }

/* sl-pieクラス内の.legendクラスの.legend-rowクラスの2番目のpath要素の塗りつぶし色を#99CC00に設定します。*/
sl-pie .legend .legend-row:nth-of-type(2) path { fill: #99CC00; }

名前によるスタイリング：

パイスライスの色：

Copied!
1
2
/* 円グラフの描画エリア内の弧（クラス_A）の色を設定します */
.pie-plot .render-area .arc._A {fill: #009900;}

あるいは：

Copied!
1
2
/* .arcクラスと_Bクラスを持つ要素の塗りつぶし色を指定 */
.arc._B { fill: #99CC00; }

凡例の色:

Copied!
1
2
3
4
5
/* sl-pieのクラス内のlegendクラス内のlegend-rowクラス内の_Aクラスのpathを選択し、その塗りつぶし色を#009900に設定します。 */
sl-pie .legend .legend-row ._A path { fill: #009900; }

/* sl-pieのクラス内のlegendクラス内のlegend-rowクラス内の_Bクラスのpathを選択し、その塗りつぶし色を#99CC00に設定します。 */
sl-pie .legend .legend-row ._B path { fill: #99CC00; }