javascript - 如何在特定数据点注释图表

Question

使用 Protovis，我生成了一个类似于此的烛台图表：http: //vis.stanford.edu/protovis/ex/candlestick-full.html。我需要为特定烛台注释图表。例如，我可以在 12:00 烛台的位置绘制三角形。如何找到该特定烛台的位置（左侧和底部）？

Answer 1

我相信标准的 protovis 方法是使注释标记成为您感兴趣的数据点的子标记，然后将其visible属性设置为仅显示您感兴趣的数据点。对于烛台示例，它可能看起来像这样：

// 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;
    });

另一种选择，如果您需要在 protovis 上下文之外获取数据（例如，您想在其中显示divHTML 文本）将在数据被定义时获取数据（例如，在定义的bottom和height属性函数中candlestick）和将其存储在全局变量中。不过，这很丑陋。