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 个数据点，但我真正想要的是每个数据点一个条形图。

所以我想我有两个问题：

1. 如何删除重复的标签？

2. 如何删除分桶但仍然用当天的名称标记 x 轴？该图表应该显示“过去 8 天”，每天有一个条形图。

Answer 1

您的两个问题都是由您的规范引起的"timeUnit": "day"。这意味着您希望将所有值放入七个存储桶中，按一周中的某一天进行标记，并且所有轴标签应仅包含该天。

所以我会尝试以下操作：

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

经过一些额外的清理（将数据内联，使用双引号而不是单引号使其在 JSON 中有效，设置显式宽度以实现可重复性，无论嵌入环境如何，并删除两个无关的嵌套层语句），这就是结果（Vega 编辑器链接）：

{
  "$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"
      }
    }
  }
}