Column -> minSize 옵션 사용방법을 알고 싶습니다.

[qudgur5442]

안녕하세요 . JUI 차트를 사용하고 있습니다.

minSize 관련 옵션에 관해서 에러인지 확인하고자 글을 작성합니다.

var chart = jui.include("chart.builder");
var activeIndex = 0,
    data = [
        { quarter : "1Q", samsung : 50, lg : 35, sony: 10 },
        { quarter : "2Q", samsung : 20, lg : 30, sony: 5 },
        { quarter : "3Q", samsung : 20, lg : 5, sony: 10 },
        { quarter : "4Q", samsung : 30, lg : 25, sony: 15 },
    ];

chart("#result", {
    axis : {
        x : {
            type : "dateblock",
            domain : "quarter",
            line : true
        },
        y : {
            type : "range",
            domain : function(data) {
                return data.samsung + data.lg + data.sony;
            },
            line : true,
            orient : "right"
        },
        data : data
    },
    brush : {
        //type : "stackcolumn",
        type : "column",
        target : [ "samsung","lg","sony" ],
      minSize: 1
    }
});

stackcolumn에서는 minSize 옵션이 적용을 하나 column에서는 작동을 하지 않습니다. 제가 사용 방법을 잘못 한건지 알고 싶습니다. 지금까지 읽어 주셔서 감사합니다.

[easylogic]

@qudgur5442

예제로 올려주신 코드가 조금 애매해서 다시 구성했습니다. 일단 영역이 될 라인이 너무 많아서 Q4 는 하나로 했습니다.

아래 코드 보시면 minSize 50 이라고 되어 있는데요. 50 이하는 무조건 50 으로 그려지게 됩니다.

var chart = jui.include("chart.builder");
var activeIndex = 0,
    data = [
        { quarter : "1Q", samsung : 50, lg : 35, sony: 10 },
        { quarter : "2Q", samsung : 20, lg : 30, sony: 5 },
        { quarter : "3Q", samsung : 20, lg : 5, sony: 10 },
        { quarter : "4Q", samsung : 70, lg : 25, sony: 15 }
    ];

chart("#result", {
    axis : {
        x : {
            type : "block",     // 날짜 데이타가 없기 때문에  block 으로 표시하시면 됩니다. 
            domain : "quarter",
            line : true
        },
        y : {
            type : "range",
            domain : function(data) {
                return data.samsung + data.lg + data.sony;
            },
            line : true,
            orient : "right"
        },
        data : data
    },
    brush : {
        //type : "stackcolumn",
        type : "column",
        target : [ "samsung","lg","sony" ],
      minSize: 50     // 차트 영역이 50이하의 숫자가 오면 50으로 그립니다. 
    }
});

[qudgur5442]

답변 주셔서 감사합니다...

제가 궁금한 것은 column을 그리는 데이터가 많아지면 column size가 0으로 되어서 차트에 표현이 되고 있지 않습니다. 이러한 문제로 인해서 stackcolumn에서는 minSize가 작동을 하지만 column에서는 minSize가 작동을 안하는 것으로 보여 집니다.

혹시 제가 생각하는 방식이 잘못되었는지 알고 싶습니다...

다른 방법이 있나요??

아래의 샘플과 사진을 첨부 드립니다. `var chart = jui.include("chart.builder");

var baseDate = +new Date(1968, 9, 3), baseValue = Math.random() 150, oneDay = 24 3600 * 1000, data = [{ date: new Date(baseDate), value: baseValue }];

for (var i = 1; i < 3650; i++) { var now = new Date(baseDate += oneDay); data.push({ date: now, value: Math.round((Math.random() - 0.498) * 40 + data[i - 1].value) }); }

chart("#result", { axis : [{ x : { type : "dateblock", domain : [ data[0].date, data[data.length - 1].date ], interval : oneDay * 365, format : "yyyy", key : "date", line : 'solid' }, y : { type : "range", domain : "value", step : 10, line : 'solid' }, data : data }], brush : [{ type : "stackcolumn", // type:"column", target : [ "value" ], minSize:2 }], widget : [{ type : "title", text : "Area Sample" }] });`

type: "stackcolumn"

type : "Column"

svg - <path width="0" height="24.04376930199055" fill="#7977C2" stroke="none" stroke-width="0" stroke-opacity="0" d="M0,0 A0,0 0 0,1 0,0 H0 A0,0 0 0,1 0,0 V24.04376930199055 A0,0 0 0,1 0,24.04376930199055 H0 A0,0 0 0,1 0,24.04376930199055 Z" transform="translate(2,454.0244125161913)"></path> 이 부분의 width값이 0이면 minSize로 조정 하는거 아닌가요?

[easylogic]

아 ~ 흠

일단 column 이 그릴 수 있는 개수를 초과한 듯 합니다.

minSize 는 column 의 넓이가 아니라 값의 높이를 의미 하기 때문에 개수랑은 상관 없구여.

개수가 많을 때 어떤식으로 그려야할지 고민을 좀 해봐야할 듯 합니다.

버그 인 것 같아요. ^^;;;;;

[easylogic]

데이타를 보통 몇개까지 그리시나요?

[qudgur5442]

사용하는 페이지 마다 다릅니다... 몇천~ 몇만 까지 갈 수 있어서 확실 하지 않습니다.

[easylogic]

날짜별로 다 봐야 하는 형태의 column 이면

colum 의 target 을 하나로 해야하지 않을까 합니다.

현재는 컬럼이 한 블럭에 3개를 동시에 그려서

공간 계산할때 안되는 부분이라

그리는 타켓을 줄이는건 어떨까요?

[easylogic]

한 공간에 3개의 column을 동시에 나열해야 하는 이유가 없다면

개별 타겟을 따로 잡은 column 차트를 따로 추가 하시면 됩니다.

brush : [{
        type : "column",
        target : "samsung",
      minSize: 1
}, {
        type : "column",
        target : "lg",
        colors : [2],     // 각각 다른색 지정
      minSize: 1
}, {
        type : "column",
        target : "sony",
       colors : [3],         // 각각 다른색 지정 
      minSize: 1
}]

[qudgur5442]

@easylogic 한 공간에 1개의 column을 그리는게 대부분이긴하나 한 차트에서는 n개의 타켓이 들어 가는 부분이 있습니다.(동시에 나열해야함...)

brush : [{ type:"column", target : [ "value" ], minSize:2 }] 위에 소스를 보면 target을 1개만 잡아도 column의 size가 0이 되어 차트에 표현이 안되고 있습니다.

[easylogic]

일단 개수가 여전히 많아서 모든 컬럼이 width 가 0이 됩니다. 1px 형태로 고정시켜줘야 할 것 같아요.

이건 하면 될 듯 한데 ..

한 영역에 여러개의 column 이 동시에 그려지는건 데이타 개수가 많으면 아예 구분이 안됩니다.

라인은 1 로 그려도 아마 라인이 다 겹칠 것 같은데요.

기존에 차트를 그렇게 보신게 있으신가요?

[easylogic]

일단은 그릴 수 있는 방법은 있습니다.

아래와 같이 size 옵션을 주시면 고정 사이트가 됩니다.

이렇게 되면 개수에 상관 없이 그 설정으로 그리기 때문에

개수에 맞춰서 size 를 변경해주셔야할 것 같습니다.

brush : [{
type:"column",
target : [ "value" ],
size: 1
}]

[qudgur5442]

@easylogic 예... size를 1로 고정 시키면 가능 하나 ....

원하는 기능은 데이터 개수만큼 자동으로 사이즈가 조절을 하면서 막대의 size가 0일때 고정 size를 넣고 싶습니다. 그러한 기능은 없나요...??

type이 'stackcolumn'에서는 minSize :2 로 하면 막대의 size가 2보다 작으면 2로 고정이 되는데 'column'에서는 height가 조절이 되는건가요??

[easylogic]

아쉽게도 현재는 없는 것 같습니다.

stackcolumn 이 column 보다 최근에 만들어진것이라 기능이 좀 더 들어간 것 같습니다.

column쪽에 기능을 따로 추가해야할 것 같아요.

[qudgur5442]

@easylogic 마지막으로

1. target이 1개이면 stackcolumn의 minSize를 사용하여 동작을 시켜도 되는건가요...??stackcolumn에서도 width값이 아닌 height 인가요. (stackcolumn -minSize -> width값 | column -minSize -> hight값)?
2. 기능을 따로 추가 하신다면... 예상 완료일을 알 수 있을까요...? 아니면 완료가 되면 태그 부탁드립니다.

[easylogic]

stackcolumn 에서 minSize 는 width 가 맞구여. column 은 minSize 는 height 입니다.

[easylogic]

만약에 target 이 하나 인 상태로 minSize 적용하실꺼라면 stackcolumn 쓰셔도 됩니다.

minSize 에 따라서 자동으로 width 변경합니다.

https://github.com/juijs/jui-chart/blob/develop/js/brush/stackcolumn.js#L17