Open hyeongsoo76 opened 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;
}
이걸 응용해서 위치조정을 해보시면 좋을 것 같습니다.
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'); });
var chart = jui.include("chart.builder"); chart("#chart", { height : 135, padding : { left : 10, right : 10, top : 7, bottom : 30 }, axis : [{ c : { type : "panel" }, data : [{ title : "Running", value : 19, max : 30, min : 0 }] }], brush : [{ type : "fullgauge", colors : [ "#57a5eb" ], symbol : "round", startAngle : 270, size : 10, titleY : 67, showText : true //format : function(value) { // return value + "k"; //} }], style : { fontFamily : "NanumGothic", gaugeFontSize : 28, gaugeTitleFontSize : "16px", gaugeTitleFontColor : "#333", gaugeTitleFontWeight : "bold", backgroundColor : 'transparent' } });
-----------------------------------
김형수
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.
@hyeongsoo76 텍스트 쪽은 css 속성이 잘 안 먹네요.
아래 처럼 스크립트로 한번 해보세요.
$(".brush-fullgauge").find("text").first().attr('y', 20)
p{margin-top:0;margin-bottom:0}
아래와 같이 적용시키니 해결 되었습니다.
감사합니다.
그럼 수고하십시오.
$(".realtime_chart_list .brush-fullgauge").find("text").first("g").attr('y', 14)
--------- 원본 메일 ---------
보낸사람: 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.
안녕하세요? 김형수입니다.
게이지 차트를 만들고 있는데 궁금한 사항이 있어 질문드립니다.
차트에서 title : “Overall Visits”, 값은 게이지 원 밖으로 위치하게 했는데… titleY : 70 처럼
value : 140k 값도 위치 조정 가능한 옵션이 있을까요?
게이지안에 세로 가운데 정렬을 하고 싶습니다.