チャート

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

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

このページには、チャートウィジェットで利用できるプロパティの情報や、ウィジェットの例および共通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\"" // フォーマッター
    }
  ]
}

---

Heat Grid

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

プロパティ

IAxis

IHeatGridModel

IHeatGridSelection

アクション

デフォルト

---

円グラフ

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

プロパティ

IPieHover

IPieSelection

アクション

例

円グラフプロット

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軸の値
}

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によって与えられた名前を持ちます。

このチャートで視覚化できるデータセットの例：

• 産業（category）の一部である株式（label）が市場のシェア（size）を持ち、価格変動率（density）を持つ

• 地域（category）ごとの工場の場所（label）が生産する製品の数量（size）と誤検出率（density）

• クラスターのノード（label）がストレージスペース（size）とストレージスペースの使用率（density）

• 世界の地域（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）または標準名（例：red、green）で指定できます。

密度のみ有効化

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

色は16進（#FF0000、#00FF00）または標準名（例：red、green）で指定できます。

カテゴリー無効化および密度無効化

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

色は16進（#FF0000、#00FF00）または標準名（例：red、green）で指定できます。

その他の設定

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

• セルのスタイリング

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

• 凡例

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

• セルの生成方法のタイル戦略。タイル戦略はd3 ↗によって定義されます：Binary、Dice、Resquarify、Slice、Slice Dice、Squarify。

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

例

これらの一連の例では、投資家がポートフォリオの保有株を視覚化したいと考えています。データにはいくつかの次元があります：株式の名前（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; }