在 Vega-Lite 中添加具有相同比例的两个系列的辅助 Y 轴,可以通过以下步骤实现:
{
"data": {
"values": [
{"x": 1, "y1": 10, "y2": 20},
{"x": 2, "y1": 15, "y2": 25},
{"x": 3, "y1": 20, "y2": 30},
{"x": 4, "y1": 25, "y2": 35},
{"x": 5, "y1": 30, "y2": 40}
]
},
"mark": "line",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y1", "type": "quantitative"},
"y2": {"field": "y2", "type": "quantitative"}
}
}
encoding
部分,将 y
字段指定为第一个系列的数据,将 y2
字段指定为第二个系列的数据。layer
属性来创建辅助 Y 轴。在 layer
中,定义两个图层,一个用于主 Y 轴,另一个用于辅助 Y 轴。例如:{
"layer": [
{
"mark": "line",
"encoding": {
"y": {"field": "y1", "type": "quantitative"}
}
},
{
"mark": "line",
"encoding": {
"y": {"field": "y2", "type": "quantitative"},
"y2": {"field": "y1", "type": "quantitative"}
}
}
]
}
y2
属性将辅助 Y 轴与主 Y 轴关联起来。const vegaEmbed = require('vega-embed');
const spec = {
// Vega-Lite 规范文件
};
vegaEmbed('#chart', spec);
以上步骤将在 Vega-Lite 中创建一个具有相同比例的两个系列的辅助 Y 轴的图表。你可以根据自己的数据和需求进行相应的修改和调整。
关于 Vega-Lite 的更多信息和详细用法,请参考腾讯云的 Vega-Lite 相关产品文档:Vega-Lite 产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云