질문이 있어 글 올립니다.

[jiwnee18]

안녕하세요. 좋은 차트 개발해주셔서 잘 쓰고있습니다. 감사합니다.

차트 개발하는 중 간단? 할 것 같은데 막상 구현이 잘 안되서 글 올립니다.

http://chartplay.jui.io/?p=brush_colors

위의 예제처럼 가로로 강조 선을 넣으려고 하는데요. 예제의 0 기준축처럼 색깔다르게 데이터 평균값을 나타내려고 합니다.

브러쉬로 나타내면 될거라고 생각하고 해봤는데 잘 안되더라구요... 조언 부탁드립니다! 감사합니다!

[easylogic]

@jiwnee

사용해주셔서 감사합니다.

charplay 링크 주신 것에 보시면 Code, Data, Style 3가지 탭이 있는데요.

거기에 Style을 보시면 두가지 속성이 색상설정 이 되어 있습니다.

gridActiveFontColor | #ff7800
gridActiveBorderColor | #ff7800

데이타로 표현하기 애매한 것들은 저희가 스타일 형태로 쓰고 있어서요.

그래서 아래와 같이 하시면 됩니다.

var chart = jui.include("chart.builder");

chart("#result", {
    axis : [{
        x : {
            type : "block",
            domain : "quarter",
            line : true
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
            line : true
        },
        data : [
            { quarter : "1Q", sales : 50, profit : 35 },
            { quarter : "2Q", sales : -20, profit : -30 },
            { quarter : "3Q", sales : 10, profit : -5 },
            { quarter : "4Q", sales : 30, profit : 25 }
        ]
    }],
    brush : [{
        type : "column",
        target : [ "sales", "profit" ],

        // Color index of theme or RGB color code
        colors : [ 2, "#9228E4" ]
    }],
    // 여기 처럼 style 속성을 넣어주세요. 
    style: {
      gridActiveFontColor : '#ff7800'
      gridActiveBorderColor: '#ff7800'
    }
});

다른게 형태가 필요 하시면 Style 탭에서 이것 저것 필요한 설정을 조정해보시면 좀 더 도움이 되실 것 같습니다.

[easylogic]

Style 탭에서 속성 값을 변경 하실려면 값에 마우스를 대고 더블클릭 하시면 에디팅 모드로 변경됩니다.

참고하세요.

[jiwnee18]

빠른 답변 정말 감사합니다.

한가지만 더 여쭤볼게요

이 이미지처럼 평균값을 나타내야하는데 평균값을 20이라고 가정하고 data로 20 값만 넘어온다면 저런식으로 x 축과 평행한 선을 그릴 방법이 있을까요..??

[easylogic]

@jiwnee

현재는 저렇게 특정한 영역으로 긋는 방법은 없구여.

라인 차트랑 컬럼 차트랑 합쳐야할 것 같습니다.

코드 보시면 brush 를 배열로 주실 수 있어요.

샘플로 하나 구성해봤습니다. 위젯을 만들어서 해도 되는데요. 일단은 있는 기능으로도 대략적으로는 할 수 있습니다.

데이타 구성을 2가지로 하고, 각 데이타에서 브러시가 원하는 데이타만 가지고 와서 사용하는 방식입니다.

브러쉬는 라인 브러쉬를 추가했습니다. 코드 보시고 이해 안되시면 말씀해주세요.

var chart = jui.include("chart.builder");

chart("#result", {
    axis : [{
        x : {
            type : "block",
            domain : "quarter",
            line : true
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
            line : true
        },
        data : [
          { quarter : "1Q", sales : 50, profit : 35, avg: 20 },
            { quarter : "2Q", sales : -20, profit : -30, avg: 20 },
            { quarter : "3Q", sales : 10, profit : -5, avg: 20 },
            { quarter : "4Q", sales : 30, profit : 25, avg: 20 }
        ]
    },
          {
        x : {
            type : "fullblock",    // fullblock 으로 해야  끝까지 라인을 채울 수 있음 
            domain : "quarter",
          line : true, hide : true 
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
          line : true, hide: true 
        },
        data : [    //  avg 가 있는 데이타를 구성 
          { quarter : "1Q", sales : 50, profit : 35, avg: 20 },
            { quarter : "2Q", sales : -20, profit : -30, avg: 20 },
            { quarter : "3Q", sales : 10, profit : -5, avg: 20 },
            { quarter : "4Q", sales : 30, profit : 25, avg: 20 }
        ]
    } 

          ],
    brush : [{
        type : "column",
        target : [ "sales", "profit" ],

        // Color index of theme or RGB color code
        colors : [ 2, "#9228E4" ]
    },
     {   // line brush 만들기 
        type : "line",
       axis: 1,    // line 은 두번째  axis 바라보기 (avg 데이타 때문에) 
      target : 'avg',   // avg 만 라인으로 그림. 
       colors: ['#ff0000']   // 라인색상 정하기 
    }]
});

[jiwnee18]

아! 이렇게 하는거군요 도움 주셔서 덕분에 잘 적용했습니다.

브러쉬를 이용하여 선을 긋는것은 성공했는데 마우스오버 이벤트를 걸어서 평균값을 나타내거나 이벤트가 안된다면 레전드로 회색선이 평균값이라는 표시를 할 수 있을까요..? (혹시 마우스오버 이벤트가 안되는건 scatter가 없어서 안되는걸까요...?)

그리고 실선을 점선으로 바꿀수 있는 방법도 혹시 있을까요??

[easylogic]

@seogi1004 님 이것 좀 도와주세요.

우리 brush 개별로 스타일 지정할 수 있어요?

[easylogic]

@jiwnee 일단 라인 차트 개별로 선을 제어할 수가 없네요. 전체 테마랑 엮여 있어서요.

대신에 color 자체에 패턴을 줄 수 있습니다. 흠 이러면 color 가 안 먹긴 하는데. 점선 비슷하게 나타낼 수는 있어요.

pattern-jennifer-10 pattern-jennifer-02

2개의 패턴을 사용할 수 있겠네요.

아래와 같이 적용해주시면 될 것 같아요.

       colors: ['pattern-jennifer-10'],   // 라인색상 정하기 

[easylogic]

@jiwnee 조금 부족하지만 일단 할 수 있는 선에서 구성해봤습니다.

보시고 안되시는 부분 있으면 다시 말씀해주세요.

var chart = jui.include("chart.builder");

// 툴팁 템플릿 
var tpl_tooltip =
'<div id="chart_tooltip" class="popover popover-top">' +
    '<div class="head">평균표시</div>' +
    '<div class="body">' +
        '<div class="image"><i class="icon-caution"></i></div>' +
        '<div class="message"><b>평균값</b>: <!= data.avg !></div>' +
    '</div>' +
'</div>';

chart("#result", {
    axis : [{
        x : {
            type : "block",
            domain : "quarter",
            line : true
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
            line : true
        },
        data : [
          { quarter : "1Q", sales : 50, profit : 35, avg: 20 },
            { quarter : "2Q", sales : -20, profit : -30, avg: 20 },
            { quarter : "3Q", sales : 10, profit : -5, avg: 20 },
            { quarter : "4Q", sales : 30, profit : 25, avg: 20 }
        ]
    },
          {
        x : {
            type : "fullblock",    // fullblock 으로 해야  끝까지 라인을 채울 수 있음 
            domain : "quarter",
          line : true, hide : true 
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
          line : true, hide: true 
        },
        data : [    //  avg 가 있는 데이타를 구성 
          { quarter : "1Q", sales : 50, profit : 35, avg: 20 },
            { quarter : "2Q", sales : -20, profit : -30, avg: 20 },
            { quarter : "3Q", sales : 10, profit : -5, avg: 20 },
            { quarter : "4Q", sales : 30, profit : 25, avg: 20 }
        ]
    } 

          ],
    brush : [{
        type : "column",
        target : [ "sales", "profit" ],

        // Color index of theme or RGB color code
        colors : [ 2, "#9228E4" ]
    },
     {   // line brush 만들기 
        type : "line",
       axis: 1,    // line 은 두번째  axis 바라보기 (avg 데이타 때문에) 
      target : 'avg',   // avg 만 라인으로 그림. 
       colors: ['pattern-jennifer-02']   // 라인색상 정하기 
    }],
    tpl : { // 툴팁 템플릿 설정 
        tooltip : tpl_tooltip
    },
    event : {  // 마우스 오버 툴팁 이벤트 설정 
        mouseover : function(obj, e) {
            if(obj.brush.index == 1) {   // 두번째 브러쉬 마우스 오버 일때 평균 값을 보여줌 
              var $tooltip = $(this.tpl.tooltip({ data: { avg : 20  /* 평균값 계산 한거 넣어주세요. */  }}));
                $("body").append($tooltip);

                $tooltip.css({ "z-index": 10000, left: e.pageX - $tooltip.width() / 2, top: e.pageY - $tooltip.height() });
            }
        },
        mouseout : function(obj, e) {
            if(obj.brush.index == 1) {
                $("#chart_tooltip").remove();
            }
        }
    }
});

[jiwnee18]

감사합니다! 덕분에 잘 만들었습니다~! 😄 🙏