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轴？该图表假定显示“过去8天”，每天有一个条形。

Answer 1

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

因此，我将尝试以下操作：

将"timeUnit": "day"替换为"timeUnit": "yearmonthdate"，这样您就不再将数据分为七个星期几类别
在轴上使用"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轴标签

2 个答案: