Как аннотировать диаграмму в определенной точке данных - PullRequest
Новая
       39

Как аннотировать диаграмму в определенной точке данных

1 голос
/ 31 марта 2011

Используя Protovis, я генерирую график свечи, похожий на этот: http://vis.stanford.edu/protovis/ex/candlestick-full.html. Мне нужно аннотировать график для конкретной свечи. Например, я мог бы нарисовать треугольник в позиции свечи 12:00. Как мне найти позицию (слева и снизу) этой конкретной свечи?

1 Ответ

1 голос
/ 04 апреля 2011

Я полагаю, что стандартный подход к протоколу Provisis - сделать пометку дочерней отметкой интересующей вас точки данных, а затем установить ее свойство 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 (например, вы хотите показать div там с текстом HTML), это получить данные в том виде, как они определены (например, в * 1006). * и height (свойства свойства определения candlestick) и сохраняют его в глобальной переменной. Это довольно уродливо, хотя.

...