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

return Math.max();부분 질문있어요 #142

Closed parkdonguk closed 7 years ago

parkdonguk commented 7 years ago
        y : {
            type : "range",
            domain : function(d) {
                return Math.max(d.배열1, d.배열2, d.배열3;
            },
            step : 10 ,
            line : true,
        },

저기 보면 d.배열1,2,3이 잇는데요

  1. 저기를 유동적으로 입력하는 방법은 없을까요..? fix된 값이 아닌 검색된값을 가지고 넣어줘야할거같아요

  2. 저희가 저자리에 업체명이 들어가는데 (주) 나 '-' 이 들어가면 에러가 생기는데 방법이 있을까요?

  3. default

그리고 사진보시면 console.log(d)로 해서 저희가 뿌려준 데이터들인데요 이게 역순으로 출력되고 있어요.. 본래는 제일 아래 데이터가 제일 처음에 나와야해요

easylogic commented 7 years ago

@parkdonguk

저기는 도메인이라 이름만 지정하는 곳입니다.

차트 개별적으로 그려지는 이름은데요. Math.max 로 못 구할 것 같습니다.

어떤 차트 쓰시나요?

parkdonguk commented 7 years ago

@easylogic line차트 쓰고있어요 http://chartplay.jui.io/?p=line 여기 셈플보면 return Math.max(d.apple, d.microsoft, d.oracle); 라고해서 사용한 도메인 이름 max값을 넘겨주던데 저 부분을 어떻게 손봐야할지 모르겠네요..

easylogic commented 7 years ago

@parkdonguk

차트에 대해서 잠깐 말씀 드리면 domain 은 표시되기 원하는 값의 범위를 지정하는 것입니다.

http://blog.jui.io/?p=538 여기를 참조하시면 좋을 것 같습니다.

아래 형태로 한번 해보시죠.

domain : function () {
    var  arr  =  Object.keys(data).map(function (key) {   
         //  키 기반 값만  (숫자만 있는) 배열로 만듦. 
         return data[key]; 
    });
    return Math.max.apply(Math, arr);    //    배열을 가지고 Math.max 전체를 실행해 값의 범위를 정함. 
}
easylogic commented 7 years ago

참고로 변수에 (주) 나 - 같은 경우도 문자열이라

data['(주)엔터인']   

이런식으로 하셔도 됩니다.

parkdonguk commented 7 years ago

@easylogic

chart("#chartBox", {
    axis : [{
        x : {
            type : "fullblock",
            domain : mon,
            line : true
        },
        y : {
            type : "range",
                           domain : function (d) {
                             var  arr  =  Object.keys(d).map(function (key) {   
                               //  키 기반 값만  (숫자만 있는) 배열로 만듦. 
                                return d[key]; 
                            });
                            return Math.max.apply(Math, arr);    //    배열을 가지고 Math.max 전체를 실행해 값의 범위를 정함. 
                        },
            step : 10 ,
            line : true,
        },
        data : data
    }],

console.log(d);를 찍으면 default

이렇게 나오는데.. 어찌할바를 모르겠네요 ㅠㅠ 이걸로 하루종일 헤메고 있어요

easylogic commented 7 years ago

@parkdonguk Y축 코드 고쳤습니다. 한번 해보세요.

parkdonguk commented 7 years ago

@easylogic default

저 자꾸 질문드려 죄송합니다만 저부분 간격조절 같은거 어떻게 해야하나요..?

easylogic commented 7 years ago

저기 차트 사이즈가 어떻게 되시나요?

parkdonguk commented 7 years ago

@easylogic 넓이는 1250px정도되요 모니터 화면 최대사이즈 주고 있습니다 width 100% 높이는 아직 안정해놨어요

차트옵션에 넓이, 높이는 안주고있고 차트 그리는 div에 width 100%만 먹여놨습니다

easylogic commented 7 years ago

그럼 차트 그리는 div 에 높이를 좀 주시구여. padding : { bottom : 100 } 이걸 차트 옵션에 한번 줘보세요.

parkdonguk commented 7 years ago

@easylogic 음.. 그래프 y축이랑 닿는건 해결이 되었는데요 default

default

글자와 버튼이 너무 다닥다닥 붙어있는데 이거는 방법이 없을까요 ?? y축 데이터값이 월이랑 겹쳐지는데 ..이것도 방법이 없을까요?

매번 감사합니다

easylogic commented 7 years ago

@parkdonguk 아 , 저기 안뛰워 지는건 현재 버그입니다. ㅠㅠ

develop 브랜치 다운로드 받아서 chart.js 로드 하시면 되긴 합니다.

아직 정식 릴리즈 전이라.

easylogic commented 7 years ago

@parkdonguk y축 데이타가 월이랑 겹치는건 어떤건가요?

parkdonguk commented 7 years ago

@easylogic 데이터가 월이랑 겹치는건 어떻게 해야할지 모르겠어요..

easylogic commented 7 years ago

말씀하신 데이타랑 월이랑 어떤식으로 겹치시나요? 이미지나 데이타를 보여주시면 좋을 것 같습니다.

parkdonguk commented 7 years ago

@easylogic 27316245-72f01ad0-55b9-11e7-9348-e4b85873b63e 이렇게 겹쳐있어요

easylogic commented 7 years ago

brush 어떻게 쓰셨나요? 옵션 좀 보여주세요.

parkdonguk commented 7 years ago

@easylogic brush : [{ type : "line", display : "all", target : comp, clip: false, animate : true },{

이렇게 사용했습니다!

easylogic commented 7 years ago

@parkdonguk 값들이 밑으로 다 내려와서 안되겠네요. 흠 그리기 옵션에 숫자를 위로 표시하지를 않아서요.

일단 각 라인별 max 값만 표시하는거면 display: 'max' 로 하시면 숫자가 위로 표시 됩니다.

그 이외는 밑으로 표시되는거라.

현재로서는 방향을 정의할 수가 없네요. 아무래도 기능을 추가 해야할 것 같습니다.

parkdonguk commented 7 years ago

@easylogic 넵 답변감사합니다 기능 추가가 됬으면 하네요! ㅎㅎ 수고하셔요~~