jui Chart Legend 관련 질문입니다.

legend를 한줄 이상 설정 시에 위치가 차트와 겹쳐보이는 현상이 있습니다. legend 위치를 조정할 수 있는 방법은 없을까요??

또, legend 개수가 20개 이상일 경우, 모두 보라색으로 보이고 있습니다. 해결방법이 있을까요??

default

var chart = jui.include("chart.builder"),
    time = jui.include("util.time");

var data = [
    { date: new Date(1994,2,1), q: 24.00, asdfh: 25.00, oasdf: 25.00,ddc: 24.875,ggl: 24.00, eeh: 25.00, 
     fffo: 25.00, vvvvvvvc: 24.875,vvvvvl: 24.00, ddddddh: 25.00, oddddd:25.00, aaaaaaac: 24.875, q: 24.00, asdfh: 25.00, oasdf: 25.00,ddc: 24.875,ggl: 24.00, eeh: 25.00, 
     fffo: 25.00, vvvvvdvvc: 24.875,vfvvvvl: 24.00, dddwddddh: 25.00, oddaddd:25.00, aaaaaaaac: 24.875, q: 24.00, asdfh: 25.00, oasdf: 25.00,ddc: 24.875,ggl: 24.00, eeh: 25.00, 
     fffo: 25.00, vvvjvvvc: 24.875,vvfvvvl: 24.00, dddwdddh: 25.00, odfdddd:25.00, aaaaadaac: 24.875, q: 24.00, asdfh: 25.00, oasdf: 25.00,ddc: 24.875,ggl: 24.00, eeh: 25.00, 
     fffo: 25.00, hvvvvvvvc: 24.875,vvvvvvl: 24.00, dddddddh: 25.00, odddfdd:25.00, aaagaaaac: 24.875 },
];

chart("#result", {
    axis : {
        x : {
            type : "block",  // default type is block
            domain : "date",
            format: function(d) {
                return time.format(d, "MM-dd");
            },
            line: true
        },
        y : {
            type : "range",
            domain: [ 20, 30 ],
            step: 5,
            line : true
        },
        data : data,
        buffer : 10,
        keymap : {
            low : "l",
            high : "h",
            open : "o",
            close : "c"
        }
    },
    brush : {
        type : "candlestick"
    },
    widget : [{
        type : "scroll"
    }, {
        type : "tooltip",
        orient : "bottom"
    },
              { type : "legend" }

             ],
    style : {
        gridTickPadding : 10
    }
});

@jsh5696

순서대로 답변을 드릴게요.

legend를 한줄 이상 설정 시에 위치가 차트와 겹쳐보이는 현상이 있습니다. legend 위치를 조정할 수 있는 방법은 없을까요??

이 부분에 대해서는 아래쪽에 차트 패딩을 주시면 됩니다.

chart("#result", {
    padding : {
        bottom: 100   // 기본값 50 으로 설정되어 있음. 
    },
    axis : {
        ....

또, legend 개수가 20개 이상일 경우, 모두 보라색으로 보이고 있습니다.

컬러의 경우 brush 속성에 colors 를 정의하는 것에 따라 달라집니다.

기본적으로 colors : [ jui 에서 제공하는 20가지 컬러 ] 로 되어 있습니다.

그걸 아래와 같이 설정하시면 됩니다.

 brush : {
        type : "candlestick",
       colors : [ 'black', 'red', , , , , , , , , , , ,]   //  원하는 색 배열을 만들어서 지정해주세요.
    },

juijs / jui-chart

jui Chart Legend 관련 질문입니다. #157