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上下文之外的数据（例如，您希望在那里显示带有HTML文本的div）将获取正在定义的数据（例如，在bottom定义的height和candlestick属性函数）并将其存储在全局变量中。但这非常难看。

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

1 个答案: