# Vega, Vega-Lite 관련 질문

**URL:** <https://discuss.elastic.co/t/vega-vega-lite/160859>\
**Category:** 한국어 질문 및 토론\
**Tags:** vega\
**Created:** [December 14, 2018, 7:44am UTC](https://discuss.elastic.co/t/vega-vega-lite/160859 "2018-12-14T07:44:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![f24b83985b804d90965e](https://avatars.discourse-cdn.com/v4/letter/f/46a35a/32.png) [@f24b83985b804d90965e](https://discuss.elastic.co/u/f24b83985b804d90965e)\
**Post date:** [December 14, 2018, 7:44am UTC](https://discuss.elastic.co/t/vega-vega-lite/160859/1 "2018-12-14T07:44:35Z")

</div>

안녕하세요  
그래프를 특수한 목적으로 표현하기위해서 Vega-lite를 사용해서 개발중에 있습니다.

#. 데이터의 형태  
Logstash config file 로 본 데이터의 형태는 아래와 같습니다.

```
columns => ["Time","PWM1","PWM2","PWM3","PWM4"]
mutate{convert=>["PWM1", "integer"]}
date{
    match => ["Time", "yyyy-MM-dd HH:mm:ss SSS"]
    target => "Time"
}

```

#. Vega-Lite  
제가 작성하고 나온 결과는 아래와 같습니다.

```
{
  $schema: "https://vega.github.io/schema/vega-lite/v2.json"
  mark: line
  data: {
    url: {
      %context%: true
      %timefield%: Time
      index: templog_mapp
      body: {
        size: 10000,
        _source: ["Time", "PWM1", "PWM2", "PWM3", "PWM4"]
      }
    }
    format: { property: "hits.hits" },
  }
  transform: [
    {
      calculate: "toDate(datum._source.Time)",
      as: "time"
    }
    {
      calculate: "datum._source.PWM1"
      as: "pwmCh1"
    }

    {
      calculate: "datum._source.PWM2 + (2 * 1)"
      as: "pwmCh2"
    }

    {
      calculate: "datum._source.PWM3 + (2 * 2)"
      as: "pwmCh3"
    }

    {
      calculate: "datum._source.PWM4 + (2 * 3)"
      as: "pwmCh4"
    }
  ]
  encoding: {
    x: { field: time, 
      type: temporal
      axis: { title: false }
    }
  }

  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {
          "field": "pwmCh1", 
          "type": "quantitative"
        }
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh2", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh3", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh4", "type": "quantitative"},
      }
    }
  ]
}

```

![image](https://us1.discourse-cdn.com/elastic/original/3X/3/a/3a819214fc4c475c29bf112469d158c2a8c91fbc.png)

원하는 기능은 다음과 같습니다.

1. 그래프 색깔 및 범례 변경  
그래프에 색깔을 넣을려고 color를 각 y축에 넣어도 undefined로만 추가되지 색을 넣을 수 가 없습니다.

2. x축 시간단위  
Zoom in, Zoom out에 따라 단위가 자동으로 ms까지 변경되는 기능이 필요합니다.

3. 변수 추가 및 스크롤 바  
작성된 Vega 코드를 보면  
{  
calculate: "datum.\_source.PWM2 + (2 \* 1)"  
as: "pwmCh2"  
}  
왼쪽 (2 \* 1)의 "2" 라는 상수 대신,  
거기에 변수를 넣고 슬라이드바로 조정을 하고 싶습니다.  
그게 안된다면 버튼으로 겹쳐보기, 나눠보기를 스위칭 되게끔 변경하는 기능이 필요합니다.

감사합니다.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 11, 2019, 7:44am UTC](https://discuss.elastic.co/t/vega-vega-lite/160859/2 "2019-01-11T07:44:42Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.