Question

从Vega开始，并通过一些简单的示例进行研究。我遇到的一件基本困难是在条形图中标注条形值。我可以使文本标记正确显示，但无法弄清楚如何将数据值格式化为百分比（'.0％'）。我已经尝试过使用字符串模板，但是没有任何运气。

以下是我的vega规范中的相关代码段：

    {
      "type": "text",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "category", "band": 0.5},
          "y": {"scale": "yscale", "field": "amount", "offset": -2},
          "text": {"field":"amount", "template":"{{datum.amount|number:'.0%'}}" },
          "fillOpacity": {"value":1}
        }
      }
    }

Here's a link to my toy example

Answer 1

对于其他人，here's the solution I arrived at

我必须弄清楚的事情：

不建议使用字符串模板语法
将格式值添加到输入数据中作为转换see here for expression syntax
您可以将这些条形作为数据源，并提取x，y值（使用Vega编辑器的便捷“数据查看器”快速检查数据）
要使标签在条上居中，请使用“ dx”属性，将其设置为刻度尺带宽的一半："dx": {"scale": "xscale", "band":0.5}

回顾一下vega如何在我尝试如何从数据中引用值的过程中获取值也很有帮助：https://vega.github.io/vega/docs/marks/#value-references。同样，使用Vega编辑器的“数据查看器”非常有帮助。

如何在vega.js中将文本标记格式化为百分比？

1 个答案: