jui 차트 tooltip 디자인 관련 질문 올립니다.

[qudgur5442]

안녕하세요. JUI 차트를 사용하고 있습니다.

차트를 사용하면서 궁금한 점이 있어서 글 작성드립니다.

필요한 기능은 해당 target의 수치와 x축(시간값)을 추가로 사용하고 싶습니다.

디자인에서는 글들이 한줄로 표현이 되어 지는데 줄 바꿔서 표현하는 방법은 없을까요..??

ex :)

---

|apple : 43.83 | |time : 00:00:00| ㅡㅡㅡㅡㅡㅡㅡ

예제의 http://chartplay.jui.io/?p=brush_event_2이 방법 말고 사용 하고 싶습니다.

현재 테스트 중인 소스 올려드립니다.

var chart = jui.include("chart.builder"); var time = jui.include("util.time"); var data = [ { x: new Date(1517238000000), apple: 26.1, microsoft: 24.86, oracle: 22.08 }, { x: new Date(1517238001000), apple: 43.83, microsoft: 27.14, oracle: 30.15 }, { x: new Date(1517238002000), apple: 55.03, microsoft: 24, oracle: 36.88 }, { x: new Date(1517238003000), apple: 72.95, microsoft: 25.39, oracle: 32.78 } ]; chart("#result", { axis: { x: { type: "dateblock", domain: "x", line: true, format: "HH:mm:ss", }, y: { type: "range", domain: function (d) { return Math.max(d.apple, d.microsoft, d.oracle); }, step: 10 }, data: data }, brush: [{ type: "line", target: ["apple", "microsoft", "oracle"] }, { type: "scatter", target: ["apple", "microsoft", "oracle"] }], widget: [ { type: "title", text: "Line Sample" }, { type: "legend" }, { type: "tooltip", brush: [1], flip: true, format: function (data, k) { return { key: [ [ [k] + " = " + [data[k]] ] ], value: ["x : " + time.format(new Date(data["x"]), "HH:mm:ss") ] }; }, } ] }); 확인 부탁드립니다.

감사합니다.

[seogi1004]

툴팁을 마크업으로 띄우는 것을 추천합니다. svg가 은근히 불편합니다. ㅠㅠ

http://chartplay.jui.io/?p=brush_event_2