질문드리는 게 좀 그렇긴 하지만 한가지 이상한 게 있어 질문드립니다.
여기서 테스트하면 정상인데 제 소스에 적용하면 문제가 생기는데요.
요지는 Line Chart 에서 Multi Line 소스를 수정하여 3개의 y 축을 설정하고 5초후에 3번째 축 데이터만 표시하도록 업데이트하면 제 소스에서는 legend third 표시가 왼쪽 상단에 짤린채로 나옵니다.
여기서 테스트하면 하단 가운데 정상적으로 표시되는데요.
혹시 문제가 예상되는 힌트 같은 걸 얻을 수 있을까요?
갑자기 멘붕왔습니다.
var chart = jui.include("chart.builder");
var time = jui.include('util.time');
racuca
commented
2 years ago
질문드리는 게 좀 그렇긴 하지만 한가지 이상한 게 있어 질문드립니다. 여기서 테스트하면 정상인데 제 소스에 적용하면 문제가 생기는데요. 요지는 Line Chart 에서 Multi Line 소스를 수정하여 3개의 y 축을 설정하고 5초후에 3번째 축 데이터만 표시하도록 업데이트하면 제 소스에서는 legend third 표시가 왼쪽 상단에 짤린채로 나옵니다. 여기서 테스트하면 하단 가운데 정상적으로 표시되는데요. 혹시 문제가 예상되는 힌트 같은 걸 얻을 수 있을까요? 갑자기 멘붕왔습니다.
var chart = jui.include("chart.builder"); var time = jui.include('util.time');
var stocks = { visitor : [ 47, 41, 38, 0, 0, 0, 3, 8, 14, 1, 2, 10, 32, 48 ], unique : [ 12, 7, 8, 0, 0, 0, 3, 2, 4, 1, 2, 3, 9, 14 ], third : [ 14, 76, 12, 12, 45, 23, 13, 22, 34, 17, 29, 15, 34, 30 ] }; var start = new Date("2014/09/03"); // ~2012-12-31 var end = new Date("2014/09/16");
var data = []; for(var i = 0; i < stocks.visitor.length; i++) { data.push({ date: time.add(start, time.days, i), visitor: stocks.visitor[i], unique: stocks.unique[i], third:stocks.third[i] }); }
c= chart("#result", { padding: { top: 50, left: 80, right: 150, bottom: 80 }, axis : [{ x : { type : "date", domain : [ start, end ], interval : 1000 60 60 * 24, // 1days format : "MM-dd", key : "date", line : true }, y : { type : "range", domain : "visitor", step : 2, color : "#1db34f" }, data : data }, { x : { hide : true }, y : { type : "range", domain : "unique", step : 4, color : "#1d7fb3", orient : "right", dist:0 }, extend : 0 }, { y: { domain: [0, 150], dist: 45, color: "#90ed7d", }, extend: 1 }], brush : [{ type : "line", target : "visitor", colors : [ "#1db34f" ], animate:true }, { type : "line", target : "unique", axis : 1, colors : [ "#1d7fb3" ],animate:true }, { type : "line", target : "third", axis : 2, colors : [ "#ff0000" ],animate:true }, { type : "scatter", target : "visitor", colors : [ "#1db34f" ], symbol : "circle", size: 7 }, { type : "scatter", target : "unique", axis : 1, colors : [ "#1d7fb3" ], symbol : "circle", size: 7 }], widget : [ { type : "title", text : "Line Sample", color: "Blue", align: "center" }, { type : "legend", brush : [ 0, 1, 2 ], align:"center", filter: true }, { type : "tooltip", brush : [ 2, 3 ] } ] });
setTimeout( function() { c.updateBrush(0, {type: "line", target:[], animate: true}); c.updateBrush(1, {type: "line", target:[], animate: true}); c.updateBrush(2, {type: "line", target:["third"], animate: true}); c.axis(0).update(data); c.render(true); }, 5000);