Vega-Lite：堆叠分组条形图答案

【问题标题】：Vega-Lite : Stacked Grouped Bar ChartVega-Lite：堆叠分组条形图
【发布时间】：2021-09-21 16:13:58
【问题描述】：

我正在使用 Vega-Lite for Data Studio，并且正在尝试创建堆叠和分组条形图。
目前，我有这个结果：https://i.stack.imgur.com/HO1wR.png

但是，我想做的是让 LEFT 条带有绿色渐变和 RIGHT 条带有蓝色渐变。
所以我的问题是：我怎样才能执行这种图表？
例如：https://i.stack.imgur.com/J5223.png

在这里，你会发现我所做的：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values"  : [
      {"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
    ] 
  },
  "height" : 200,
  "width" : 500,
  "encoding": {
    "tooltip" : [
      {"field" : "Team"},
      {"field" : "Task"},
      {"field" : "Done"},
      {"field" : "Planned"},
      {"field" : "Activity_Type"}
    ],
    "y": {"axis": {"title": "Number of points"}},
    "x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
      "encoding": {
        "y": {
          "field": "Done",
          "type": "quantitative"
        },
        "color": {
          "field": "Activity_Type",
          "type": "nominal",
          "scale": {
            "range": ["#81c784", "#629b65", "#3d683f"] // GREEN GRADIENT
          },
          "title": "Activity_Type",
          "legend" : null
        }
      }
    },
    {
      "mark": {
        "type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
      },
      "encoding": {
        "y": {
          "field": "Planned",
          "type": "quantitative"
        },
        "color": {
          "field": "Activity_Type",
          "type": "nominal",
          "scale": {
            "range": ["#1e88e5", "#2f75b3", "#255279"] // BLUE GRADIENT
          },
          "legend" : null
        }
      }
    }
  ]
}

提前感谢您的帮助！

【问题讨论】：

标签： google-data-studio vega-lite stacked-chart

【解决方案1】：

我终于找到了可以完成这项工作的解决方案！
对于想要的人，这是我的解决方案：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values"  : [
      {"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
    ] 
  },
  "height" : 200,
  "width" : 500,
  "encoding": {
    "tooltip" : [
      {"field" : "Team"},
      {"field" : "Task"},
      {"field" : "Done"},
      {"field" : "Planned"},
      {"field" : "Activity_Type"}
    ],
    "y": {"axis": {"title": "Number of points"}},
    "x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
      "encoding": {
        "y": {
          "field": "Done",
          "type": "quantitative"
        },
        "color": {
          "condition" : [
            {"test" : "datum.Activity_Type === 'TypeA'", "value" : "#629b65"},
            {"test" : "datum.Activity_Type === 'TypeB'", "value" : "#81c784"}
          ],
          "value": "#3d683f"
        }
      }
    },
    {
      "mark": {
        "type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
      },
      "encoding": {
        "y": {
          "field": "Planned",
          "type": "quantitative"
        },
        "color": {
          "condition" : [
            {"test" : "datum.Activity_Type === 'TypeA'","value" : "#1e88e5"},
            {"test" : "datum.Activity_Type === 'TypeB'","value" : "#2f75b3"}
          ],
          "value": "#255279"
        }
      }
    }
  ]
}

看起来像这样：

【讨论】：