Vega-lite 复制 x 轴标签

Question

图片说明了一切，每天都有重复的标签，而我真正想要的是每个栏只有一个标签。我的数据集包含 8 个数据点：

[
   {     
      "date":"2019-06-21T00:00:00.000Z",    
      "value":44.6,      
   },
   {      
      "date":"2019-06-22T00:00:00.000Z",      
      "value":916.4,      
   },
   {
      "date":"2019-06-23T00:00:00.000Z",    
      "value":948.4,      
   },
   {    
      "date":"2019-06-24T00:00:00.000Z",    
      "value":872.4,      
   },
   {      
      "date":"2019-06-25T00:00:00.000Z",      
      "value":952.4,      
   },
   {      
      "date":"2019-06-26T00:00:00.000Z",      
      "value":1006.4,      
   },
   {      
      "date":"2019-06-27T00:00:00.000Z",      
      "value":945.4,   
   },
   {      
      "date":"2019-06-28T00:00:00.000Z",
      "value":320.8,
   }
]

而我的图表定义如下：

{
        '$schema': 'https://vega.github.io/schema/vega-lite/v3.json',
        'description': 'Electricity consumption by month',
        'height': 320,
        'autosize': {
            'type': 'fit',
            'resize': false,
            'contains': 'padding'
        },
        'layer': [{
            'data': {
                'name': 'data'
            },
            'layer': [{
                'mark': 'bar',
                'encoding': {
                    'x': { 'field': 'date', 'timeUnit': 'day', 'type': 'temporal', 'axis': { 'grid': false, 'labelAngle': 0 } },
                    'y': {
                        'field': 'value',
                        'type': 'quantitative',
                        'axis': {
                            'format': '.2f',
                            'title': 'kwh'
                        }
                    }
                }
            }
            ]
        }]
        }

另外，我认为这些值是按天分桶的，因为有 7 个条形图和 8 个数据点，但我真正想要的是每个数据点一个条形图。

所以我想我有两个问题：

如何删除重复的标签？
如何删除分桶但仍用日期名称标记 x 轴？此图表假设显示 "last 8 days"，每天有一个柱状图。

Answer 1

您的两个问题都是由您指定的 "timeUnit": "day" 引起的。这表示您希望将所有值放入七个桶中，按星期几标记，并且所有轴标签应仅包含一天。

所以我会尝试以下操作：

将 "timeUnit": "day" 替换为 "timeUnit": "yearmonthdate"，这样您就不会再将数据分为七个 day-of-week 类别
在轴中使用 "format": "%A" 将标签格式化为星期几（有关详细信息，请参阅 d3-time-format）。
此外，使用 ordinal 类型而不是 temporal 或 quantitative 类型的条形图看起来更好，这将确保没有重复标签

通过一些额外的清理（将数据内联，使用双引号而不是单引号使其在 JSON 中有效，设置明确的宽度以实现可重复性，而不管嵌入环境如何，并删除两个无关的嵌套层语句) 这是结果 (vega editor link):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "Electricity consumption by month",
  "height": 320,
  "width": 320,
  "data": {
    "values": [
      {
        "date": "2019-06-21T00:00:00.000Z",
        "value": 44.6
      },
      {
        "date": "2019-06-22T00:00:00.000Z",
        "value": 916.4
      },
      {
        "date": "2019-06-23T00:00:00.000Z",
        "value": 948.4
      },
      {
        "date": "2019-06-24T00:00:00.000Z",
        "value": 872.4
      },
      {
        "date": "2019-06-25T00:00:00.000Z",
        "value": 952.4
      },
      {
        "date": "2019-06-26T00:00:00.000Z",
        "value": 1006.4
      },
      {
        "date": "2019-06-27T00:00:00.000Z",
        "value": 945.4
      },
      {
        "date": "2019-06-28T00:00:00.000Z",
        "value": 320.8
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "date",
      "timeUnit": "yearmonthdate",
      "type": "ordinal",
      "axis": {
        "grid": false,
        "format": "%A",
        "labelAngle": 0
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {
        "format": ".2f",
        "title": "kwh"
      }
    }
  }
}

Answer 2

在轴 vega-config 中使用 labelSeparation。 https://vega.github.io/vega-lite/docs/axis.html#labels

您可以执行以下操作：标签分隔：200 根据您的需要进行调整。

Vega-lite 复制 x 轴标签

Vega-lite Duplicate x-axis labels

vega

vega-lite