使用蜡烛图仪时如何设置注释？

Question

我有蜡烛绘图仪示例，但当我尝试向数据系列添加注释时，注释只是浮动到图表的左上角。

很明显，绘图员在绘图中花哨的步法混淆了注释 setter。

我是 Dygraphs 的新手，我的 JavaScript 生锈了，所以我很感激任何关于让注释与绘图仪一起工作的指示。

var BAR_WIDTH = 8;

function candlePlotter(e) {
  // This is the officially endorsed way to plot all the series at once.
  if (e.seriesIndex !== 0) return;

  var setCount = e.seriesCount;
  if (setCount != 4) {
    throw "You must provide exactly 4 price series: open close high low";
  }

  var prices = [];
  var price;
  var sets = e.allSeriesPoints;
  for (var p = 0; p < sets[0].length; p++) {
    price = {
      open: sets[0][p].yval,
      close: sets[1][p].yval,
      high: sets[2][p].yval,
      low: sets[3][p].yval,
      openY: sets[0][p].y,
      closeY: sets[1][p].y,
      highY: sets[2][p].y,
      lowY: sets[3][p].y
    };
    prices.push(price);
  }

  var area = e.plotArea;
  var ctx = e.drawingContext;
  ctx.strokeStyle = '#202020';
  ctx.lineWidth = 0.6;

  for (p = 0; p < prices.length; p++) {
    ctx.beginPath();

    price = prices[p];
    var topY = area.h * price.highY + area.y;
    var bottomY = area.h * price.lowY + area.y;
    var centerX = area.x + sets[0][p].x * area.w;
    ctx.moveTo(centerX, topY);
    ctx.lineTo(centerX, bottomY);
    ctx.closePath();
    ctx.stroke();
    var bodyY;
    if (price.open > price.close) {
      ctx.fillStyle = 'rgba(244,44,44,1.0)';
      bodyY = area.h * price.openY + area.y;
    } else {
      ctx.fillStyle = 'rgba(44,244,44,1.0)';
      bodyY = area.h * price.closeY + area.y;
    }
    var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
    ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
  }

}

var candleData = "Date,Open,Close,High,Low\n" +
  "1,392.54,390.95,394.63,389.38\n" +
  "2,389.93,389.09,390.94,386.76\n" +
  "3,391.45,390.66,395.50,390.23\n" +
  "4,392.85,393.62,394.04,391.03\n" +
  "5,391.68,391.84,393.90,389.45\n" +
  "6,393.00,388.81,395.40,387.10\n" +
  "7,386.70,380.19,387.38,377.68\n" +
  "8,383.33,378.94,383.74,378.31\n" +
  "9,380.36,381.02,384.15,379.57\n" +
  "10,382.47,382.21,384.85,380.48\n" +
  "11,387.76,395.95,396.10,387.26\n" +
  "12,396.69,396.45,397.30,392.01\n" +
  "13,397.00,398.55,399.13,396.10\n" +
  "14,399.69,403.33,403.59,399.49\n" +
  "15,403.10,406.53,409.09,403.02\n" +
  "16,406.89,402.64,408.25,401.34\n" +
  "17,403.40,405.12,405.65,400.51\n" +
  "18,403.51,405.00,406.28,403.49\n" +
  "19,409.50,411.23,412.50,409.00\n" +
  "20,410.21,413.44,414.68,409.28\n";

g = new Dygraph(
  document.getElementById("candlechart"),
  candleData, {
    plotter: candlePlotter,
  });

g.ready(function() {
  g.setAnnotations([{
    series: "High",
    x: "6",
    shortText: "Hello",
    text: "Hello world"
  }]);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.js"></script>
<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" />

<div id="candlechart"></div>

Answer 1

问题在于您如何获取 dygraphs 样式表。应该是 <link href>，而不是 <link src>。这是更正后的代码片段。

var BAR_WIDTH = 8;

function candlePlotter(e) {
  // This is the officially endorsed way to plot all the series at once.
  if (e.seriesIndex !== 0) return;

  var setCount = e.seriesCount;
  if (setCount != 4) {
    throw "You must provide exactly 4 price series: open close high low";
  }

  var prices = [];
  var price;
  var sets = e.allSeriesPoints;
  for (var p = 0; p < sets[0].length; p++) {
    price = {
      open: sets[0][p].yval,
      close: sets[1][p].yval,
      high: sets[2][p].yval,
      low: sets[3][p].yval,
      openY: sets[0][p].y,
      closeY: sets[1][p].y,
      highY: sets[2][p].y,
      lowY: sets[3][p].y
    };
    prices.push(price);
  }

  var area = e.plotArea;
  var ctx = e.drawingContext;
  ctx.strokeStyle = '#202020';
  ctx.lineWidth = 0.6;

  for (p = 0; p < prices.length; p++) {
    ctx.beginPath();

    price = prices[p];
    var topY = area.h * price.highY + area.y;
    var bottomY = area.h * price.lowY + area.y;
    var centerX = area.x + sets[0][p].x * area.w;
    ctx.moveTo(centerX, topY);
    ctx.lineTo(centerX, bottomY);
    ctx.closePath();
    ctx.stroke();
    var bodyY;
    if (price.open > price.close) {
      ctx.fillStyle = 'rgba(244,44,44,1.0)';
      bodyY = area.h * price.openY + area.y;
    } else {
      ctx.fillStyle = 'rgba(44,244,44,1.0)';
      bodyY = area.h * price.closeY + area.y;
    }
    var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
    ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
  }

}

var candleData = "Date,Open,Close,High,Low\n" +
  "1,392.54,390.95,394.63,389.38\n" +
  "2,389.93,389.09,390.94,386.76\n" +
  "3,391.45,390.66,395.50,390.23\n" +
  "4,392.85,393.62,394.04,391.03\n" +
  "5,391.68,391.84,393.90,389.45\n" +
  "6,393.00,388.81,395.40,387.10\n" +
  "7,386.70,380.19,387.38,377.68\n" +
  "8,383.33,378.94,383.74,378.31\n" +
  "9,380.36,381.02,384.15,379.57\n" +
  "10,382.47,382.21,384.85,380.48\n" +
  "11,387.76,395.95,396.10,387.26\n" +
  "12,396.69,396.45,397.30,392.01\n" +
  "13,397.00,398.55,399.13,396.10\n" +
  "14,399.69,403.33,403.59,399.49\n" +
  "15,403.10,406.53,409.09,403.02\n" +
  "16,406.89,402.64,408.25,401.34\n" +
  "17,403.40,405.12,405.65,400.51\n" +
  "18,403.51,405.00,406.28,403.49\n" +
  "19,409.50,411.23,412.50,409.00\n" +
  "20,410.21,413.44,414.68,409.28\n";

g = new Dygraph(
  document.getElementById("candlechart"),
  candleData, {
    plotter: candlePlotter,
  });

g.ready(function() {
  g.setAnnotations([{
    series: "High",
    x: '6',
    shortText: "Hello",
    text: "Hello world"
  }]);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css" />

<div id="candlechart"></div>

使用蜡烛图仪时如何设置注释？

How to set annotations when using the candle plotter?

dygraphs