Vega 图表中的自定义标签文本

Question

非常简单的问题：我有一个 Vega 图表，对于 x 轴，我想显示 "low" 和 "high" 而不是 0 和 1（它们是领域）。

所以我的 x 比例尺看起来像这样：

{
   'name': 'xscale',
   'type': 'linear',
   'domain': [0, 1],
   'range': 'width',
   'round': true,
   'zero': true,
   'nice': true
 }

而我的坐标轴是这样的：

{
  'orient': 'bottom',
  'scale': 'xscale',
  'tickCount': 1,
  'title': 'Prices
}

我在文档中看到我可以自定义标签文本，但我不清楚如何自定义。谢谢！

Answer 1

所以基本上解决方法很简单。我从这个 github post 中得到了一些启发：https://github.com/vega/vega/issues/714

您只需要一个三元表达式即可 return 标签文本的结果。当然，这仅适用于具有 2 个值（最小值和最大值）的轴。

'encode': {
          'labels': {
            'update': {
              'fill': { 'value': '#FF0000' },
              'align': { 'value': 'left' },
              'baseline': { 'value': 'middle' },
              'dx': { 'value': 0 },
              'dy': { 'value': 12 },
              'text': { 'signal': 'datum.value === 1 ? "High" : "Low"' }
            }
          }
        }

就是这样。现在，标签将读取 "High" 而不是 1，标签将读取 "Low".

而不是 0

Vega 图表中的自定义标签文本

Custom label text in Vega chart

javascript

data-visualization

vega