チャート

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

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

このページでは、チャートウィジェットで利用可能なプロパティ、ウィジェットの例、および共通 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": [],
      "yValues": []
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "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
34
35
36
37
38
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "bar",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "legendPosition": "top",
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "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
35
36
37
38
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "stackedBar",
      "seriesValues": "{{query1.gender}}",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "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,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "horizontalBar",
      "xValues": "{{query1.avgIncome}}",
      "yValues": "{{query1.state}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "Average Income ($)",
      "scale": "linear",
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "label": "State",
      "scale": "category"
    }
  ]
}

複数系列のグラフ

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
{
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "seriesValues": "{{query1.series}}",
      "xValues": "{{query1.key}}",
      "yValues": "{{query1.doc_count}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "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}}",
      "yValues": "{{query1.cpi}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

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

距離と時間の値を示す経路メトリクスを表示するために、散布図ウィジェットを作成するとします。左上隅のウィジェットボタンを選択し、次にグラフ > 散布図を選択して、アプリケーションに散布図ウィジェットを追加します。ウィジェットにはサンプルデータがあらかじめ入力されています。先に進む前に、右側のエディターパネルからこのデータをクリアできます。

まず、グラフウィジェットの名前を、w_routeMetrics などの識別しやすい名前に変更します。

経路の平均距離を x 軸に沿ってプロットします。そのためには、X 値を "{{q_routeMetrics.avg_distance}}" に設定する必要があります。

次に、経路の所要時間を y 軸に沿ってプロットします。データタブで、Y 値を "{{q_routeMetrics.avg_time}}" に設定します。

散布図を読み取りやすくするため、軸にラベルを追加します。軸タブを選択し、最初の X 軸オブジェクトの名前を x1 から Distance に変更して、Distance (miles) など、プロットされた情報を説明するラベルを追加します。グリッド線をオンにすると、グラフ上の各点の位置を把握しやすくなります。

Y 軸に Duration という名前を付け、次のように設定します。

最後に、点のサイズに変化を付けます。経路の混雑度に応じて点のサイズが変わるようにします。そのためには、データタブに戻り、半径: を "{{q_routeMetrics.num_flights}}" に設定します。

グラフをもう一度確認します。グラフが塗りつぶされてしまい、何かが正しくないように見えます。これは、半径: の値では指定された値と半径のピクセル数が1対1で対応して描画される一方、一部の経路には150便を超えるフライトがあるためです。半径の値をスケーリングする必要があります。クエリで「表示用」の値を計算すると、スケーリングできます。この値をハードコードすることもできますが、変数を使用すれば、クエリを編集せずに後から簡単に変更できます。

上部バーの変数タブを選択して、変数ウィンドウを開きます。右下で新しい変数を作成します。新しい変数に 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

w_routeMetrics ウィジェットに戻り、半径: の設定を変更して、num_flights ではなく num_flights_disp 列を参照するようにします。

グラフを仕上げるために、w_routeMetrics 設定パネルの上部にあるタイトルの入力項目に、タイトル 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",
      "renderer": "line",
      "xValues": [1,2,3,4,5,6,7,8,9],
      "yValues": [3,4,1,4,5,4,2,4,1],
      "seriesValues": null,
      "xAxisName": "x1",
      "yAxisName": "y1"
    },
    {
      "endValues": [3],
      "name": "dataset2",
      "renderer": "yRange",
      "startValues": [2]
    },
    {
      "endValues": [3.5,8],
      "name": "dataset3",
      "renderer": "xRange",
      "startValues": [2.5,6],
      "seriesValues": ["Range A","Range B"]
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "linear",
      "label": "",
      "formatter": "\"0\""
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "linear",
      "formatter": "\"0\""
    }
  ]
}

---

ガントチャート

ガントチャートは、時間ベースのデータをカテゴリ軸の y 軸に沿った水平バーとして表示します。ガントチャートを使用して、スケジュール、プロジェクトのタイムライン、イベントの継続時間、および項目に開始時刻と終了時刻がある任意のデータセットを可視化できます。ガントチャートは、上記で説明したチャートウィジェットのプロパティを共有します。

プロパティ

IGanttDatasetModel

ガントデータセットモデルは IRangeDatasetModel と ILabelsModel を拡張します。startValues、endValues、labels プロパティについては、上記の IRangeDatasetModel と ILabelsModel のテーブルで説明しています。共通の name、renderer、seriesColors、seriesNames、seriesValues プロパティについては、IDatasetModel のテーブルで説明しています。

x 軸には timeseries スケール、y 軸には category スケールを使用し、データセットの renderer を "gantt" に設定する必要があります。startValues、endValues、yValues の配列はすべて同じ長さである必要があります。labels を指定する場合、その長さも yValues と一致する必要があります。

アクション

デフォルト

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
{
  "animate": true,
  "areaSelectionEnabled": false,
  "autorangePanZoomEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": ["4/3/2015 9:00", "4/5/2015 9:00", "4/7/2015 9:00"],
      "labels": ["Label 1", "Label 2", "Label 3"],
      "name": "dataset1",
      "renderer": "gantt",
      "seriesValues": ["a", "b", "a"],
      "startValues": ["4/1/2015 9:00", "4/2/2015 9:00", "4/4/2015 9:00"],
      "yValues": ["Event 1", "Event 2", "Event 3"]
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "betweenTicks": false,
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "visible": true
    }
  ],
  "yAxes": [
    {
      "betweenTicks": false,
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "visible": true
    }
  ],
  "zeroBoundYAxisEnabled": true
}

例

基本的なガントチャート

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
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": "{{query1.endDate}}",
      "labels": "{{query1.taskName}}",
      "name": "dataset1",
      "renderer": "gantt",
      "seriesValues": "{{query1.phase}}",
      "startValues": "{{query1.startDate}}",
      "yValues": "{{query1.taskName}}"
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": true,
  "legendPosition": "top",
  "panZoomEnabled": false,
  "tooltipsEnabled": true,
  "tooltipText": "{{w_ganttChart.hover.yValue}}",
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "label": "Date"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "label": "Task"
    }
  ]
}

系列の色を設定したガントチャート

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
{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": ["4/5/2015 9:00", "4/8/2015 9:00", "4/12/2015 9:00", "4/15/2015 9:00"],
      "labels": ["Design", "Develop", "Test", "Deploy"],
      "name": "dataset1",
      "renderer": "gantt",
      "seriesColors": ["#2965CC", "#29A634", "#D99E0B", "#D13913"],
      "seriesNames": ["Planning", "Engineering", "QA", "Operations"],
      "seriesValues": ["Planning", "Engineering", "QA", "Operations"],
      "startValues": ["4/1/2015 9:00", "4/4/2015 9:00", "4/8/2015 9:00", "4/11/2015 9:00"],
      "yValues": ["Design", "Develop", "Test", "Deploy"]
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": true,
  "legendPosition": "right",
  "panZoomEnabled": false,
  "tooltipsEnabled": true,
  "tooltipText": "{{w_ganttChart.hover.yValue}}",
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "label": "Timeline"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "label": "Phase"
    }
  ]
}

---

ヒートグリッド

以下のテーブルでは、ヒートグリッドチャートウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後にいくつかの例を示します。

プロパティ

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",
        "position": "bottom",
        "scale": "category",
        "visible": true
    },
    "xValues": [],
    "yAxis": {
        "gridlinesEnabled": false,
        "name": "y1",
        "position": "bottom",
        "scale": "category",
        "visible": true
    },
    "yValues": []
}

---

円グラフ

以下のテーブルでは、円グラフウィジェットで利用可能なプロパティの使用方法を説明します。テーブルの後にいくつかの例を示します。

プロパティ

IPieHover

IPieSelection

アクション

例

円グラフ

Copied!
1
2
3
4
5
6
7
8
{
  "keys": "{{query1.teamName}}",
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": "{{query1.headCount}}"
}

ドーナツグラフ

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
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
.line-plot .render-area g:nth-of-type(1) path {stroke: #6a2d9f;}.line-plot .render-area g:nth-of-type(2) path {stroke:#c993f1;}

凡例の色：

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #6a2d9f;}

または、

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #c993f1;}

棒グラフ

以下は、積み上げ棒グラフ、集合棒グラフ、通常の棒グラフに適用されます。

棒の色：

Copied!
1
.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 {fill: #c993f1;}

凡例の色：

Copied!
1
2
3
4
5
6
7
8
.legend .legend-row .legend-entry:nth-of-type(1) path {
  fill: #6a2d9f;
}

.legend .legend-row .legend-entry:nth-of-type(2) path,
.legend .content .legend-row:nth-of-type(2) path {
  fill: #c993f1;
}

面グラフ

以下は、積み上げ面グラフと通常の面グラフに適用されます。

面の色：

Copied!
1
.area-plot .render-area  g:nth-of-type(1) path,.area-plot:nth-of-type(1) path {fill: #009900;}.area-plot .render-area  g:nth-of-type(2) path,.area-plot:nth-of-type(2) path {fill: #99CC00;}

線の色：

Copied!
1
.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(1) path {stroke: #009900;}.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(2) path {stroke: #99CC00;}

凡例の色：

Copied!
1
.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #009900;}

または：

Copied!
1
.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
.pie-plot .render-area .arc:nth-of-type(1) {fill: #009900;}

または：

Copied!
1
.arc:nth-of-type(2) { fill: #99CC00; }

凡例の色：

Copied!
1
2
sl-pie .legend .legend-row:nth-of-type(1) path { fill: #009900; }
sl-pie .legend .legend-row:nth-of-type(2) path { fill: #99CC00; }

名前によるスタイル設定：

円グラフのスライスの色：

Copied!
1
.pie-plot .render-area .arc._A {fill: #009900;}

または：

Copied!
1
.arc._B { fill: #99CC00; }

凡例の色：

Copied!
1
2
sl-pie .legend .legend-row ._A path { fill: #009900; }
sl-pie .legend .legend-row ._B path { fill: #99CC00; }