fullgauge 차트에서 value 값이 위치조정 질문입니다.

hyeongsoo76 commented 7 years ago

안녕하세요? 김형수입니다.

게이지 차트를 만들고 있는데 궁금한 사항이 있어 질문드립니다.

var chart = jui.include(“chart.builder”);

chart("#result", {
    axis : [{
        c : {
            type : “panel”,
        },
        data : [{
            title : “Overall Visits”,
            value : 140,
            max : 200,
            min : 0
        }]
    }],
    brush : [{
        type : “fullgauge”,
        symbol : “round”,
        startAngle : 0,
        size : 30,
        titleY :70,
        showText : true,
        format : function(value) {
            return value + "k";
        }
    }],
    style : {
        gaugeFontSize : 30
    }
});

차트에서 title : “Overall Visits”, 값은 게이지 원 밖으로 위치하게 했는데… titleY : 70 처럼

value : 140k 값도 위치 조정 가능한 옵션이 있을까요?

게이지안에 세로 가운데 정렬을 하고 싶습니다.

easylogic commented 7 years ago

@hyeongsoo76 일단 jui 내에서 제공하는 기능은 없는 상태입니다.

jui 내에서 안되기 때문에 외부에서 해줘야할 것 같은데요.

보시면 jui 가 기본적으로 svg 를 생성하는 구조 이기 때문에

외부에서 css 로 위치를 조절하실 수 있습니다.

예를 들어 아래와 같은 형태로 svg 가 있다고 했을 때

<text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there
  </text>

CSS 로 아래와 같이 제어 하실 수 있습니다.

svg text {
    x : 35px;     //  svg 각 속성을 css 로 매칭 시키시면  됩니다. 
    y : 200px; 
}

이걸 응용해서 위치조정을 해보시면 좋을 것 같습니다.

hyeongsoo76 commented 7 years ago

        p{margin-top:0;margin-bottom:0}

외부 css에서 제어를 어떻게 해야되는지.. 잘 안되네요..

아래 샘플 차트입니다.

value : 19, 라는 부분에 19를 게이지에 세로 중앙정렬를 하고 싶은데요... 해당 svg text y="9.3333" 이 값이 변할지 않네요... ```javascript //Real Time Top 5 selected

$('.realtime_info_table tr').click( function() { $('.realtime_info_table tr').removeClass('active'); $(this).addClass('active'); });



-----------------------------------
김형수
Phone :  010-2615-4778
E-Mai l : hyeongsoo76@daum.net
-----------------------------------

--------- 원본 메일 ---------

        보낸사람: jinho park <notifications@github.com>
        받는사람: juijs/jui-chart <jui-chart@noreply.github.com>

            참조: hyeongsoo76 <hyeongsoo76@daum.net>, Mention <mention@noreply.github.com>

        날짜: 17.07.21 12:22 GMT +0900
        제목: Re:_[juijs/jui-chart]_fullgauge_차트에서_value_값이_위치조정_질문입니다._(#147)

        @hyeongsoo76  일단 jui 내에서 제공하는 기능은 없는 상태입니다.
jui 내에서 안되기 때문에 외부에서 해줘야할 것 같은데요.
보시면 jui 가 기본적으로 svg 를 생성하는 구조 이기 때문에
외부에서 css 로 위치를 조절하실 수 있습니다.
예를 들어  아래와 같은 형태로  svg 가 있다고 했을 때
<text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there
  </text>
CSS 로 아래와 같이 제어 하실 수 있습니다.
svg text {
    x : 35px;     //  svg 각 속성을 css 로 매칭 시키시면  됩니다. 
    y : 200px; 
}

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

easylogic commented 7 years ago

@hyeongsoo76 텍스트 쪽은 css 속성이 잘 안 먹네요.

아래 처럼 스크립트로 한번 해보세요.

$(".brush-fullgauge").find("text").first().attr('y', 20)

hyeongsoo76 commented 7 years ago

    p{margin-top:0;margin-bottom:0}

아래와 같이 적용시키니 해결 되었습니다.

감사합니다.

그럼 수고하십시오.

$(".realtime_chart_list .brush-fullgauge").find("text").first("g").attr('y', 14)

김형수 Phone : 010-2615-4778 E-Mai l : hyeongsoo76@daum.net

--------- 원본 메일 ---------

    보낸사람: jinho park <notifications@github.com>
    받는사람: juijs/jui-chart <jui-chart@noreply.github.com>

        참조: hyeongsoo76 <hyeongsoo76@daum.net>, Mention <mention@noreply.github.com>

    날짜: 17.07.21 14:55 GMT +0900
    제목: Re:_[juijs/jui-chart]_fullgauge_차트에서_value_값이_위치조정_질문입니다._(#147)

    @hyeongsoo76  텍스트 쪽은 css 속성이 잘 안 먹네요.

아래 처럼 스크립트로 한번 해보세요. $(".brush-fullgauge").find("text").first().attr('y', 20)

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.

juijs / jui-chart

fullgauge 차트에서 value 값이 위치조정 질문입니다. #147

김형수 Phone : 010-2615-4778 E-Mai l : hyeongsoo76@daum.net