차트사용에 있어 몇가지 궁금한점..

[parkdonguk]

1. 천단위 ',' 찍는법.. 현재는 그래프 그린뒤에.. 각 값을 찾아서 콤마를 찍어주는데요 그래프 옵션에 천단위 콤마를 보여주도록 표시하는게 있을꺼같은데 있으면 알려주세요

2. 1번처럼 그래프 그린뒤 콤마를 찍으니까 브라우저 사이즈를 늘였다 줄였다 하면 콤마가 다시 없어져버림

3. line그래프 사용중인데 제알 앞칸에 Y축 값이랑 글자가 겹쳐있는데 해결법 있는지

4. 그래프하단에 cursor="pointer" 버튼으로 해당 line을 보여주고 안보여주고를 할 수 있는데 안보여주고 했을때 화면상에서는 사라지지만 해당 그래프가 있었던 꼭지점 부분에 마우스를 가져다 대면 값이 나옴

5. 지금 01월~12월까지 해서 판매량 을 보여주는 그래프인데 01월 12월 x축 앞위로 공간여유를 둘수 있는지.. [그럼 3번을 해결할거같은데..]

[easylogic]

@parkdonguk

3, 5 번과 같이 전체 영역에서 겹치는 부분이 있으면 chart 의 패딩을 조절하실 수 있습니다.

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

여기 샘플을 보시면

padding : {
    left: 50, 
    top: 50 
}

위와 같이 left, top, right, bottom 으로 지정할 수 있고 기본값은 모두 50 입니다.

원하시는대로 조절하시면 차트를 그리는 영역이 padding 에 따라 조절됩니다.

[easylogic]

1 번의 경우

x축 , y 축 , 각 brush 마다 format : 이라는 함수를 정의할 수가 있습니다.

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

여기 샘플을 보시면 축마다 format : function () 을 정의한 게 있습니다. 이걸로 워하시는 , 를 찍는 함수를 적용하시면 됩니다.

[parkdonguk]

Y축에는 천단위로 , 를 찍었습니다. y : { type : "range", domain : function(d) { return Math.max(d.1, d.2, d.3, d.4, d.5); }, step : 10 , line : true, format : function(value) { return number_format(value); }

저기 동그라미 친 데이터에는 어디를 바꿔야 할가요 ;

[seogi1004]

저 동그라미 부분은 테마 변경을 해야 합니다. 차트 빌더의 style 옵션에 아래 테마 속성을 변경해서 넣으시면 됩니다.

tooltipPointRadius tooltipPointBorderWidth tooltipPointFontWeight tooltipPointFontSize tooltipPointFontColor

[parkdonguk]

저기 동그라미친 숫자도 천단위 ','를 찍고싶은데.. 말씀해주신건 그래프 그림? 옵션 같아보이는데요..ㅠ_ㅠ

[seogi1004]

ㅠㅠ 죄송합니다. 난독증이 있나봐요. 댓글 잘못 달았네요.

[seogi1004]

format 옵션을 chart builder 레벨로 올리세요!

chart("#result", {
    axis : {
        x : {
            type : "fullblock",
            domain : [ "2010", "2011", "2012", "2013" ],
            line : true
        },
        y : {
            type : "range",
            domain : function(d) {
                return Math.max(d.apple, d.microsoft, d.oracle);
            },
            step : 10
        },
        data : data
    },
    brush : {
        type : "line",
        display : "max",
        active : "microsoft",
        activeEvent : "click"
    },
    widget : [
        { type : "title", text : "Line Sample" },
        { type : "legend" }
    ],
  format : function(d) {    // 여기에 format 을 지정해주세요. 
    return "$" + d;
  }
});

[parkdonguk]

와우! 감사합니다! 근데 이런 사용법 정보는 어떻게 아신건가요??ㅠㅠ 옵션정보라던가 필요한정보를 어디서 찾아야할지 모르겠어요

[seogi1004]

http://chartplay.jui.io 샘플 중에 있긴 있어요. ㅠㅠ 아니면 코드를 보시는게 제일 빨라요. 매뉴얼이 부실해서 ㅠㅠ

[easylogic]

http://api.jui.io/v2/

api 문서가 있지만 실제로 사용할려면 너무 많이 알아야해서 활용도가 떨어지네요.

위에서 소개한 chartplay 샘플을 보시는게 제일 좋을 것 같습니다.

메뉴얼이 부실해서 ㅠㅠ

[parkdonguk]

아~ 감사합니다 ^^ 질문 4번만어떻게 해결하면되겠는데 휴~~ 저기들어가서 하나하나 다 봐야겠네요

[easylogic]

4번은 버그 같아요 ~ ㅠㅠ 현상을 다시 재현해봐야겠네요.

[parkdonguk]

4번 현상입니다~! ㅎㅎ

근데

https://store.jui.io/v2/view.php?id=58ec898794976c04270e54d8

여기보면 그런현상이 없더라구요... 옵션을 잘못준건지 모르겠네요

----------사용한 소스----------------

//PC는 사이즈 픽스, 모바일은 반응형
var filter = "win16|win32|win64|mac|macintel";
var mobile = false;
if( navigator.platform )
{
    if(filter.indexOf( navigator.platform.toLowerCase() ) < 0 )
    {
        //mobile
        mobile = true;
        var winW = '100%';
        var winH = '100%';

    }
    else
    {
        //pc
        mobile = false;
        var winW = (window.innerWidth / 2) - 20;
        var winH = window.innerHeight - 20;
    }
}

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

var stocks = {
    대일정공 : [ 1585,335,6189,8160,17445,7952,7814,6089,6650,10105,7053,4082 ].reverse(),
    주영툴링 : [ 3360,4080,6682,11179,5408,8248,8023,7772,9425,8749,4038,6279 ].reverse(),
    구로공구 : [ 620,1300,1432,2688,1701,2989,2414,7724,8075,52136,0,0 ].reverse(),
    우남기공 : [ 1206,335,14542,19585,20404,2605,2282,1881,6740,273,0,0 ].reverse(),
    엠에이치툴링 : [ 677,705,15661,8171,4043,2475,4464,20722,1353,2640,1886,2931 ].reverse()
};

var comp = ["대일정공","주영툴링","구로공구","우남기공","엠에이치툴링"];

var data = [];
for(var i = 0; i < stocks.대일정공.length; i++)
{
    data.push
    ({
        //date : time.add(start, time.months, i),
        대일정공 : stocks.대일정공[i],
        주영툴링 : stocks.주영툴링[i],
        구로공구 : stocks.구로공구[i],
        우남기공 : stocks.우남기공[i],
        엠에이치툴링 : stocks.엠에이치툴링[i]
    });
}

chart("#result", {
    width : winW, //pc에서는 사이즈 픽스
    height : winH,
    axis : [{
        x : {
            type : "fullblock",
            domain : [ "01월", "02월", "03월", "04월", "05월", "06월", "07월", "08월", "09월", "10월", "11월", "12월" ],
            line : true
        },
        y : {
            type : "range",
            domain : function(d) {
                return Math.max(d.대일정공, d.주영툴링, d.구로공구, d.우남기공, d.엠에이치툴링);
            },
            step : 10 ,
            line : true,
        },
        data : data
    }],
    brush : [{
        type : "line",
        display : "all",
        target : comp,
        clip: false,
        animate : true
    },{
        type : "scatter",
        target : comp,
        hide : true
    }],
    widget : [{
        type : "title",
        text : "매출 추이도 "
    }, {
        type : "legend",
        filter : true
    }, {
        type : "tooltip",
        brush : 1
    }],
    format : function(value) {
        return number_format(value);
    },
    }
});

사용한 소스입니다

[parkdonguk]

아.. 하나더 궁금한게 있는데요 원형 그래프는 (주) 이런 기호가 들어가도 출력이 잘 되던데 line그래프는 특수기호가 들어가니까 에러가 생기던데 이건 어떻게 해야 할까요

[easylogic]

@parkdonguk 어떤 에러가 발생 하나요? 따로 특수문자를 제한하는 코드는 없습니다.