juijs / jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://codepen.io/collection/nLydod/
57 stars 25 forks source link

widget-legend 텍스트가 overflow 되는 현상 #133

Closed canelia04 closed 7 years ago

canelia04 commented 7 years ago

chart2

안녕하세요. widget-legend로 항목을 여러개 표시했는데요. 뿌려야 할 영역의 width 가 424인 것 같은데 408지점부터 시작해서 일부 텍스트가 overflow 되어 버립니다

그리고, 현재는 align이 start 인데요 center로 설정할 경우 가운데가 아니라 왼쪽에 padding 준 것 처럼 밀립니다. 이것 역시 오른쪽으로 넘어가서 일부 텍스트가 표시되지 않습니다.

감사합니다.

easylogic commented 7 years ago

알려주셔서 감사합니다. 넓이에 개별 레전드사이즈를 맞추게 되어 있는데 조금 엇나가 있나 보네요.

확인 하고 알려드릴게요

canelia04 commented 7 years ago

네 감사합니다. 증상은 맥의 크롬과 사파리에서 확인하였고 윈도우쪽은 확인해 보지 못했습니다.

canelia04 commented 7 years ago

legend의 this.draw에서 줄바꿈시 translate 한번 더 하도록 수정했고 밑의 else구문을 없애고 사용 중 입니다. 주석표시한 3부분 입니다.


        this.draw = function() {
            var group = chart.svg.group();           
            var x = 0,
                y = 0,
                total_width = 0,
                total_height = 0,
                max_width = 0,
                max_height = 0,
                brushes = getIndexArray(widget.brush);

            var total_widthes = [];

            for(var i = 0; i < brushes.length; i++) {
                var index = brushes[i];

                // brushSync가 true일 경우, 한번만 실행함
                if(widget.brushSync && i > 0) continue;

                var brush = chart.get("brush", brushes[index]),
                    arr = this.getLegendIcon(brush);

                for(var k = 0; k < arr.length; k++) {
                    group.append(arr[k].icon);
                    arr[k].icon.translate(x, y);

                    if (widget.orient == "bottom" || widget.orient == "top") {
                        if (x + arr[k].width > chart.area('x2')) {
                            x = 0;
                            y += arr[k].height;
                            max_height += arr[k].height;
                            arr[k].icon.translate(x, y); // HERE
                            total_widthes.push(total_width);
                            total_width = 0;
                        } // else { HERE
                           total_width += arr[k].width;
                            x += arr[k].width; 
                        // } HERE
....
easylogic commented 7 years ago

아직 버전업이 안되서 그러는데요. 필요하시면 develop 체크아웃 받아서 테스트 해보실 수 있습니다.