Vega Lite 中的标签条形图具有绝对数字和百分比

Question

我可以用 Vega Lite 中创建的条形图标记其占总数的百分比或绝对数量，如下所示：

这是规范：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "binMin": -300,
        "binMax": 0,
        "binName": "-5 to 0 minutes",
        "count": 29,
        "percentOfTotal": 0.14215686274509803
      },
      {
        "binMin": 0,
        "binMax": 360,
        "binName": "0 to +6 minutes",
        "count": 51,
        "percentOfTotal": 0.25
      },
      {
        "binMin": 360,
        "binMax": 600,
        "binName": "+6 to +10 minutes",
        "count": 32,
        "percentOfTotal": 0.1568627450980392
      },
      {
        "binMin": 600,
        "binMax": 1200,
        "binName": "+10 to +20 minutes",
        "count": 90,
        "percentOfTotal": 0.4411764705882353
      }
    ]
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {
        "type": "text",
        "align": "center",
        "yOffset": -10,
        "fontSize": 18
      },
      "encoding": {
        "text": {
          "field": "percentOfTotal",
          "type": "quantitative",
          "format": ".0%",
          "formatType": "number"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "binName",
      "type": "nominal",
      "title": "Wait Time for Transfer (Minutes)",
      "axis": {"titleFontSize": 18, "labelAngle": 0, "labelFontSize": 14},
      "sort": {"field": "binMin"}
    },
    "y": {
      "field": "count",
      "type": "quantitative",
      "title": "Total Transfers",
      "axis": {"titleFontSize": 18, "labelFontSize": 14}
    },
    "color": {
      "legend": false,
      "field": "binMin",
      "scale": {"range": ["red", "orange", "green", "yellowgreen"]}
    }
  }
}

我想更改标签以显示两者，例如“29 (14%)”的 left/red 栏的标签。

我已经弄清楚如何设置 config.customFormatTypes = true 并在 JavaScript 中编写一个小的格式化程序函数。但是，我不清楚如何将两个字段传递给此格式化程序，以便将绝对数字和百分比（或该类别的绝对数字和所有类别的总数）传递给它。

有什么指点吗？谢谢

Answer 1

要在文本上显示 2 个字段 "29 (14%)" 的串联值，您可以使用转换 calculate 并根据您的字段生成串联字符串。然后，在您的 text 标记中使用该字段，如下所示或参考 editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": "container",
  "height": "container",
  "data": {
    "values": [
      {
        "binMin": -300,
        "binMax": 0,
        "binName": "-5 to 0 minutes",
        "count": 29,
        "percentOfTotal": 0.14215686274509803
      },
      {
        "binMin": 0,
        "binMax": 360,
        "binName": "0 to +6 minutes",
        "count": 51,
        "percentOfTotal": 0.25
      },
      {
        "binMin": 360,
        "binMax": 600,
        "binName": "+6 to +10 minutes",
        "count": 32,
        "percentOfTotal": 0.1568627450980392
      },
      {
        "binMin": 600,
        "binMax": 1200,
        "binName": "+10 to +20 minutes",
        "count": 90,
        "percentOfTotal": 0.4411764705882353
      }
    ]
  },
  "layer": [
    {"mark": "bar"},
    {
      "transform": [
        {
          "calculate": "format(datum.percentOfTotal, '.0%')",
          "as": "perc_total"
        },
        {
          "calculate": "datum.count+' (' +datum.perc_total +')'",
          "as": "countPercentText"
        }
      ],
      "mark": {
        "type": "text",
        "align": "center",
        "yOffset": -10,
        "fontSize": 18
      },
      "encoding": {"text": {"field": "countPercentText", "type": "ordinal"}}
    }
  ],
  "encoding": {
    "x": {
      "field": "binName",
      "type": "nominal",
      "title": "Wait Time for Transfer (Minutes)",
      "axis": {"titleFontSize": 18, "labelAngle": 0, "labelFontSize": 14},
      "sort": {"field": "binMin"}
    },
    "y": {
      "field": "count",
      "type": "quantitative",
      "title": "Total Transfers",
      "axis": {"titleFontSize": 18, "labelFontSize": 14}
    },
    "color": {
      "legend": false,
      "field": "binMin",
      "scale": {"range": ["red", "orange", "green", "yellowgreen"]}
    }
  }
}

Vega Lite 中的标签条形图具有绝对数字和百分比

label bar chart in Vega Lite with both absolute number and percentage

vega-lite