Vega-lite 限制序号类型的刻度数
Vega-lite limiting the number of ticks with ordinal type
我使用了 Vega-lite 条形图的示例,其中我在 x 轴上有一个主要流派,而 y 轴显示了计数。
以下是 vega-lite 配置:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A dashboard with cross-highlighting.",
"data": {"url": "data/movies.json"},
"width": 330,
"height": 120,
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {"labelAngle": 0, "labelOverlap": "parity"}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
}
在此,我在 x 轴中使用了 labelOverlap
配置以避免标签重叠,因此现在标签名称的数量有限。我想减少应该等于标签的 x 轴刻度数。我尝试使用 tickCount
配置,但它似乎适用于定量和时间类型的字段。此外,当我们使用时间时,日期字段显示有限编号。标签和刻度线。所以这种行为是我想用名义和序数类型实现的。
我知道减少名义或有序轴上刻度数的唯一方法是设置 "ticks": false
隐藏 all 个刻度,或者使用 "values"
条目显式设置可见刻度。下面是后者的例子(open in editor):
{
"data": {"url": "data/movies.json"},
"width": 330,
"height": 120,
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {
"labelAngle": 0,
"labelOverlap": "parity",
"values": [null, "Comedy", "Horror", "Western"]
}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
}
我不得不用 x-axis 创建另一个图层,其中隐藏了标签名称并添加了另一个数据对象,其中将包含一些虚拟记录。这不是一种正确的方法,但它似乎可以满足我的用例。因此,无论主要数据标签如何,额外的层都会完成显示刻度的工作。
下面是修改后的 vega-lite 配置:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A dashboard with cross-highlighting.",
"data": {"url": "data/movies.json"},
"width": 320,
"height": 120,
"layer": [
{
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {
"labelAngle": 0,
"labelOverlap": "parity",
"ticks": false,
"labelPadding": 10
}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
},
{
"mark": "text",
"data": {
"values": [
{"Major Genre": "a"},
{"Major Genre": "b"},
{"Major Genre": "c"},
{"Major Genre": "d"}
]
},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {"labels": false, "orient": "bottom", "title": null}
}
}
}
],
"resolve": {"axis": {"x": "independent"}, "scale": {"x": "independent"}}
}
我使用了 Vega-lite 条形图的示例,其中我在 x 轴上有一个主要流派,而 y 轴显示了计数。
以下是 vega-lite 配置:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A dashboard with cross-highlighting.",
"data": {"url": "data/movies.json"},
"width": 330,
"height": 120,
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {"labelAngle": 0, "labelOverlap": "parity"}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
}
在此,我在 x 轴中使用了 labelOverlap
配置以避免标签重叠,因此现在标签名称的数量有限。我想减少应该等于标签的 x 轴刻度数。我尝试使用 tickCount
配置,但它似乎适用于定量和时间类型的字段。此外,当我们使用时间时,日期字段显示有限编号。标签和刻度线。所以这种行为是我想用名义和序数类型实现的。
我知道减少名义或有序轴上刻度数的唯一方法是设置 "ticks": false
隐藏 all 个刻度,或者使用 "values"
条目显式设置可见刻度。下面是后者的例子(open in editor):
{
"data": {"url": "data/movies.json"},
"width": 330,
"height": 120,
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {
"labelAngle": 0,
"labelOverlap": "parity",
"values": [null, "Comedy", "Horror", "Western"]
}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
}
我不得不用 x-axis 创建另一个图层,其中隐藏了标签名称并添加了另一个数据对象,其中将包含一些虚拟记录。这不是一种正确的方法,但它似乎可以满足我的用例。因此,无论主要数据标签如何,额外的层都会完成显示刻度的工作。 下面是修改后的 vega-lite 配置:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A dashboard with cross-highlighting.",
"data": {"url": "data/movies.json"},
"width": 320,
"height": 120,
"layer": [
{
"mark": "bar",
"selection": {"pts": {"type": "single", "encodings": ["x"]}},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {
"labelAngle": 0,
"labelOverlap": "parity",
"ticks": false,
"labelPadding": 10
}
},
"y": {"aggregate": "count"},
"color": {
"condition": {"selection": "pts", "value": "steelblue"},
"value": "grey"
}
}
},
{
"mark": "text",
"data": {
"values": [
{"Major Genre": "a"},
{"Major Genre": "b"},
{"Major Genre": "c"},
{"Major Genre": "d"}
]
},
"encoding": {
"x": {
"field": "Major Genre",
"type": "ordinal",
"axis": {"labels": false, "orient": "bottom", "title": null}
}
}
}
],
"resolve": {"axis": {"x": "independent"}, "scale": {"x": "independent"}}
}