как определить json для данных многострочного графика

Question

Я пытался выяснить, как определить данные для многострочного графика в vega-lite, но я не могу заставить его работать. Примеры показывают данные для файла csv в конечной точке URL (https://vega.github.io/vega-editor/?mode=vega-lite&spec=line_color&showEditor=1), но я хочу просмотреть данные, которые я определяю в простом 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"} 
    } 
}; 

Как изменить «данные», так как дисплей многострочный график? (и, если возможно, отобразить более полезную информацию, которая не указана в таблице символов). Вот что я вижу прямо сейчас: Line graph with undefined symbol

Спасибо!

Answer 1

Вам нужно будет добавить поле символов в свои данные. Я добавил поле символов и символы 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"} 
    } 
}