특정 데이터 포인트에서 차트를 주석을 달기하는 방법
-
14-11-2019 - |
문제
프로토 비아를 사용하여 다음과 유사한 촛대 차트를 생성합니다. http : //vis.stanford.edu/protovis/ex/candlestick-full.html .특정 촛대의 차트를 주석을 달아야합니다.예를 들어, 나는 12시 촛대의 위치에 삼각형을 그릴 수 있습니다.특정 촛대의 위치 (왼쪽 및 하단)를 어떻게 찾을 수 있습니까?
해결책
I believe the standard protovis approach to this is to make the annotation mark a child mark of the data point you're interested in, then set its visible
property to only display for the data point you're interested in. For the candlestick example, it might look like this:
// the thin line of the candlestick
var candlestick = vis.add(pv.Rule)
.data(vix)
.left(function(d) x(d.date))
.bottom(function(d) y(Math.min(d.high, d.low)))
.height(function(d) Math.abs(y(d.high) - y(d.low)))
.strokeStyle(function(d) d.open < d.close ? "#ae1325" : "#06982d");
// the thick line of the candlestick
candlestick.add(pv.Rule)
.bottom(function(d) y(Math.min(d.open, d.close)))
.height(function(d) Math.abs(y(d.open) - y(d.close)))
.lineWidth(10);
// the annotation mark
candlestick.add(pv.Dot)
.size(40)
.shape("triangle")
.left(function() {
// candlestick here refers to the parent instance
return candlestick.left()
})
.top(function() {
// candlestick here refers to the parent instance
// this is 10px from the top of the candlestick
return h - candlestick.bottom() - candlestick.height() - 10;
})
.visible(function(d) {
// only show the mark for the data we care about - here, June 12
// (month is 0-based)
return d.date.getUTCMonth() == 5 && d.date.getUTCDate() == 12;
});
The other option, if you need to get the data outside of the protovis context (e.g. you want to show a div
there with HTML text) would be to grab the data as it's being defined (e.g. in the bottom
and height
property functions of the candlestick
definition) and store it in a global variable. This is pretty ugly, though.