Closed jiwnee18 closed 7 years ago
@jiwnee
사용해주셔서 감사합니다.
charplay 링크 주신 것에 보시면 Code, Data, Style 3가지 탭이 있는데요.
거기에 Style을 보시면 두가지 속성이 색상설정 이 되어 있습니다.
gridActiveFontColor | #ff7800
gridActiveBorderColor | #ff7800
데이타로 표현하기 애매한 것들은 저희가 스타일 형태로 쓰고 있어서요.
그래서 아래와 같이 하시면 됩니다.
var chart = jui.include("chart.builder");
chart("#result", {
axis : [{
x : {
type : "block",
domain : "quarter",
line : true
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true
},
data : [
{ quarter : "1Q", sales : 50, profit : 35 },
{ quarter : "2Q", sales : -20, profit : -30 },
{ quarter : "3Q", sales : 10, profit : -5 },
{ quarter : "4Q", sales : 30, profit : 25 }
]
}],
brush : [{
type : "column",
target : [ "sales", "profit" ],
// Color index of theme or RGB color code
colors : [ 2, "#9228E4" ]
}],
// 여기 처럼 style 속성을 넣어주세요.
style: {
gridActiveFontColor : '#ff7800'
gridActiveBorderColor: '#ff7800'
}
});
다른게 형태가 필요 하시면 Style 탭에서 이것 저것 필요한 설정을 조정해보시면 좀 더 도움이 되실 것 같습니다.
Style 탭에서 속성 값을 변경 하실려면 값에 마우스를 대고 더블클릭 하시면 에디팅 모드로 변경됩니다.
참고하세요.
빠른 답변 정말 감사합니다.
한가지만 더 여쭤볼게요
이 이미지처럼 평균값을 나타내야하는데 평균값을 20이라고 가정하고 data로 20 값만 넘어온다면 저런식으로 x 축과 평행한 선을 그릴 방법이 있을까요..??
@jiwnee
현재는 저렇게 특정한 영역으로 긋는 방법은 없구여.
라인 차트랑 컬럼 차트랑 합쳐야할 것 같습니다.
코드 보시면 brush 를 배열로 주실 수 있어요.
샘플로 하나 구성해봤습니다. 위젯을 만들어서 해도 되는데요. 일단은 있는 기능으로도 대략적으로는 할 수 있습니다.
데이타 구성을 2가지로 하고, 각 데이타에서 브러시가 원하는 데이타만 가지고 와서 사용하는 방식입니다.
브러쉬는 라인 브러쉬를 추가했습니다. 코드 보시고 이해 안되시면 말씀해주세요.
var chart = jui.include("chart.builder");
chart("#result", {
axis : [{
x : {
type : "block",
domain : "quarter",
line : true
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true
},
data : [
{ quarter : "1Q", sales : 50, profit : 35, avg: 20 },
{ quarter : "2Q", sales : -20, profit : -30, avg: 20 },
{ quarter : "3Q", sales : 10, profit : -5, avg: 20 },
{ quarter : "4Q", sales : 30, profit : 25, avg: 20 }
]
},
{
x : {
type : "fullblock", // fullblock 으로 해야 끝까지 라인을 채울 수 있음
domain : "quarter",
line : true, hide : true
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true, hide: true
},
data : [ // avg 가 있는 데이타를 구성
{ quarter : "1Q", sales : 50, profit : 35, avg: 20 },
{ quarter : "2Q", sales : -20, profit : -30, avg: 20 },
{ quarter : "3Q", sales : 10, profit : -5, avg: 20 },
{ quarter : "4Q", sales : 30, profit : 25, avg: 20 }
]
}
],
brush : [{
type : "column",
target : [ "sales", "profit" ],
// Color index of theme or RGB color code
colors : [ 2, "#9228E4" ]
},
{ // line brush 만들기
type : "line",
axis: 1, // line 은 두번째 axis 바라보기 (avg 데이타 때문에)
target : 'avg', // avg 만 라인으로 그림.
colors: ['#ff0000'] // 라인색상 정하기
}]
});
아! 이렇게 하는거군요 도움 주셔서 덕분에 잘 적용했습니다.
브러쉬를 이용하여 선을 긋는것은 성공했는데 마우스오버 이벤트를 걸어서 평균값을 나타내거나 이벤트가 안된다면 레전드로 회색선이 평균값이라는 표시를 할 수 있을까요..? (혹시 마우스오버 이벤트가 안되는건 scatter가 없어서 안되는걸까요...?)
그리고 실선을 점선으로 바꿀수 있는 방법도 혹시 있을까요??
@seogi1004 님 이것 좀 도와주세요.
우리 brush 개별로 스타일 지정할 수 있어요?
@jiwnee 일단 라인 차트 개별로 선을 제어할 수가 없네요. 전체 테마랑 엮여 있어서요.
대신에 color 자체에 패턴을 줄 수 있습니다. 흠 이러면 color 가 안 먹긴 하는데. 점선 비슷하게 나타낼 수는 있어요.
pattern-jennifer-10 pattern-jennifer-02
2개의 패턴을 사용할 수 있겠네요.
아래와 같이 적용해주시면 될 것 같아요.
colors: ['pattern-jennifer-10'], // 라인색상 정하기
@jiwnee 조금 부족하지만 일단 할 수 있는 선에서 구성해봤습니다.
보시고 안되시는 부분 있으면 다시 말씀해주세요.
var chart = jui.include("chart.builder");
// 툴팁 템플릿
var tpl_tooltip =
'<div id="chart_tooltip" class="popover popover-top">' +
'<div class="head">평균표시</div>' +
'<div class="body">' +
'<div class="image"><i class="icon-caution"></i></div>' +
'<div class="message"><b>평균값</b>: <!= data.avg !></div>' +
'</div>' +
'</div>';
chart("#result", {
axis : [{
x : {
type : "block",
domain : "quarter",
line : true
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true
},
data : [
{ quarter : "1Q", sales : 50, profit : 35, avg: 20 },
{ quarter : "2Q", sales : -20, profit : -30, avg: 20 },
{ quarter : "3Q", sales : 10, profit : -5, avg: 20 },
{ quarter : "4Q", sales : 30, profit : 25, avg: 20 }
]
},
{
x : {
type : "fullblock", // fullblock 으로 해야 끝까지 라인을 채울 수 있음
domain : "quarter",
line : true, hide : true
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true, hide: true
},
data : [ // avg 가 있는 데이타를 구성
{ quarter : "1Q", sales : 50, profit : 35, avg: 20 },
{ quarter : "2Q", sales : -20, profit : -30, avg: 20 },
{ quarter : "3Q", sales : 10, profit : -5, avg: 20 },
{ quarter : "4Q", sales : 30, profit : 25, avg: 20 }
]
}
],
brush : [{
type : "column",
target : [ "sales", "profit" ],
// Color index of theme or RGB color code
colors : [ 2, "#9228E4" ]
},
{ // line brush 만들기
type : "line",
axis: 1, // line 은 두번째 axis 바라보기 (avg 데이타 때문에)
target : 'avg', // avg 만 라인으로 그림.
colors: ['pattern-jennifer-02'] // 라인색상 정하기
}],
tpl : { // 툴팁 템플릿 설정
tooltip : tpl_tooltip
},
event : { // 마우스 오버 툴팁 이벤트 설정
mouseover : function(obj, e) {
if(obj.brush.index == 1) { // 두번째 브러쉬 마우스 오버 일때 평균 값을 보여줌
var $tooltip = $(this.tpl.tooltip({ data: { avg : 20 /* 평균값 계산 한거 넣어주세요. */ }}));
$("body").append($tooltip);
$tooltip.css({ "z-index": 10000, left: e.pageX - $tooltip.width() / 2, top: e.pageY - $tooltip.height() });
}
},
mouseout : function(obj, e) {
if(obj.brush.index == 1) {
$("#chart_tooltip").remove();
}
}
}
});
감사합니다! 덕분에 잘 만들었습니다~! 😄 🙏
안녕하세요. 좋은 차트 개발해주셔서 잘 쓰고있습니다. 감사합니다.
차트 개발하는 중 간단? 할 것 같은데 막상 구현이 잘 안되서 글 올립니다.
http://chartplay.jui.io/?p=brush_colors
위의 예제처럼 가로로 강조 선을 넣으려고 하는데요. 예제의 0 기준축처럼 색깔다르게 데이터 평균값을 나타내려고 합니다.
브러쉬로 나타내면 될거라고 생각하고 해봤는데 잘 안되더라구요... 조언 부탁드립니다! 감사합니다!