如何为多线图数据定义json
how to define json for multi-line graph data
我一直在尝试找出如何在 vega-lite 中定义多线图的数据,但我无法让它工作。这些示例在 URL 端点 ( https://vega.github.io/vega-editor/?mode=vega-lite&spec=line_color&showEditor=1 ) 显示 csv 文件的数据,但我想查看我在简单 json.
中定义的数据
这是我的单线图:
var LineSpec = {
"description": "variation over time for",
"data": {
"values":
[
{"date": "2012-04-23T18:25:43.511Z","price": 10},
{"date": "2012-04-25T18:25:43.511Z","price": 7},
{"date": "2012-04-27T18:25:43.511Z","price": 4},
{"date": "2012-05-01T18:25:43.511Z","price": 1},
{"date": "2012-05-03T18:25:43.511Z","price": 2},
{"date": "2012-05-05T18:25:43.511Z","price": 6},
{"date": "2012-05-07T18:25:43.511Z","price": 8},
{"date": "2012-05-09T18:25:43.511Z","price": 4},
{"date": "2012-05-11T18:25:43.511Z","price": 7}
]
},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
};
如何修改 "data" 以显示多线图? (如果可能的话,显示符号 table 中未定义的更多有用信息)。这是我现在看到的:
Line graph with undefined symbol
谢谢!
您必须将符号字段添加到您的数据中。我添加了符号字段和符号 A 和 B。此数据应呈现图例中包含两个符号的多线图:
{
"description": "variation over time for",
"data": {
"values": [
{"date": "2012-04-23T18:25:43.511Z","price": 10, "symbol": "A"},
{"date": "2012-04-25T18:25:43.511Z","price": 7, "symbol": "B"},
{"date": "2012-04-27T18:25:43.511Z","price": 4, "symbol": "A"},
{"date": "2012-05-01T18:25:43.511Z","price": 1, "symbol": "B"},
{"date": "2012-05-03T18:25:43.511Z","price": 2, "symbol": "A"},
{"date": "2012-05-05T18:25:43.511Z","price": 6, "symbol": "B"},
{"date": "2012-05-07T18:25:43.511Z","price": 8, "symbol": "A"},
{"date": "2012-05-09T18:25:43.511Z","price": 4, "symbol": "B"},
{"date": "2012-05-11T18:25:43.511Z","price": 7, "symbol": "A"}
]
},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
}
我一直在尝试找出如何在 vega-lite 中定义多线图的数据,但我无法让它工作。这些示例在 URL 端点 ( https://vega.github.io/vega-editor/?mode=vega-lite&spec=line_color&showEditor=1 ) 显示 csv 文件的数据,但我想查看我在简单 json.
中定义的数据这是我的单线图:
var LineSpec = {
"description": "variation over time for",
"data": {
"values":
[
{"date": "2012-04-23T18:25:43.511Z","price": 10},
{"date": "2012-04-25T18:25:43.511Z","price": 7},
{"date": "2012-04-27T18:25:43.511Z","price": 4},
{"date": "2012-05-01T18:25:43.511Z","price": 1},
{"date": "2012-05-03T18:25:43.511Z","price": 2},
{"date": "2012-05-05T18:25:43.511Z","price": 6},
{"date": "2012-05-07T18:25:43.511Z","price": 8},
{"date": "2012-05-09T18:25:43.511Z","price": 4},
{"date": "2012-05-11T18:25:43.511Z","price": 7}
]
},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
};
如何修改 "data" 以显示多线图? (如果可能的话,显示符号 table 中未定义的更多有用信息)。这是我现在看到的: Line graph with undefined symbol
谢谢!
您必须将符号字段添加到您的数据中。我添加了符号字段和符号 A 和 B。此数据应呈现图例中包含两个符号的多线图:
{
"description": "variation over time for",
"data": {
"values": [
{"date": "2012-04-23T18:25:43.511Z","price": 10, "symbol": "A"},
{"date": "2012-04-25T18:25:43.511Z","price": 7, "symbol": "B"},
{"date": "2012-04-27T18:25:43.511Z","price": 4, "symbol": "A"},
{"date": "2012-05-01T18:25:43.511Z","price": 1, "symbol": "B"},
{"date": "2012-05-03T18:25:43.511Z","price": 2, "symbol": "A"},
{"date": "2012-05-05T18:25:43.511Z","price": 6, "symbol": "B"},
{"date": "2012-05-07T18:25:43.511Z","price": 8, "symbol": "A"},
{"date": "2012-05-09T18:25:43.511Z","price": 4, "symbol": "B"},
{"date": "2012-05-11T18:25:43.511Z","price": 7, "symbol": "A"}
]
},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
}