如何在 vega-lite 的折线图中画线?
How to draw a line in a line chart in vega-lite?
我根据索引绘制了一条曲线
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"title": {
"text": "Receiver Operating Characteristics - Area Under Curve",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"data": {
"url" : {
"%context%": true,
"index": "roccurve_index2",
"body": {
"size":10000,
"_source": ["lr_fpr", "lr_tpr"],
}
}
"format": {"property": "hits.hits"},
},
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {"field": "_source.lr_fpr", "type": "quantitative", "title":"False Positive Rate"},
"y": {"field": "_source.lr_tpr", "type": "quantitative", "title":"True Positive Rate"}
}
}
情节看起来像
现在我需要在 0 和 1 之间为基础模型画一条基线,比如
这是否可能,并将其设为带有图例的虚线,显示名称为基本模型、RF 模型
是的,可以使用 Layered Views。
我将使用 Line Chart example 修改并添加另一条同样为虚线的行。
原图:
https://vega.github.io/editor/#/examples/vega-lite/line
这是修改后的图表,我对直线使用了显式值:
https://vega.github.io/editor/#/gist/152fbe5f986ba78e422bb3430628f010/spec.json
图层解决方案
当您使用分层视图时,您可以在同一个图表和相同的 x 和 y 轴中放置多条线
"layer" : [
{
//mark #1
},
{
//mark #2
}
]
虚线
可以使用strokeDash
属性来实现。看这个例子:Line chart with varying stroke dash
我根据索引绘制了一条曲线
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
"title": {
"text": "Receiver Operating Characteristics - Area Under Curve",
"anchor": "middle",
"fontSize": 16,
"frame": "group",
"offset": 4
},
"data": {
"url" : {
"%context%": true,
"index": "roccurve_index2",
"body": {
"size":10000,
"_source": ["lr_fpr", "lr_tpr"],
}
}
"format": {"property": "hits.hits"},
},
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {"field": "_source.lr_fpr", "type": "quantitative", "title":"False Positive Rate"},
"y": {"field": "_source.lr_tpr", "type": "quantitative", "title":"True Positive Rate"}
}
}
情节看起来像
现在我需要在 0 和 1 之间为基础模型画一条基线,比如
这是否可能,并将其设为带有图例的虚线,显示名称为基本模型、RF 模型
是的,可以使用 Layered Views。
我将使用 Line Chart example 修改并添加另一条同样为虚线的行。 原图: https://vega.github.io/editor/#/examples/vega-lite/line
这是修改后的图表,我对直线使用了显式值:
https://vega.github.io/editor/#/gist/152fbe5f986ba78e422bb3430628f010/spec.json
图层解决方案
当您使用分层视图时,您可以在同一个图表和相同的 x 和 y 轴中放置多条线
"layer" : [
{
//mark #1
},
{
//mark #2
}
]
虚线
可以使用strokeDash
属性来实现。看这个例子:Line chart with varying stroke dash