javascript - 将股票代码添加到 Flot 条形图中

Question

我使用 Flot 库创建了一个图表。我需要添加一个刻度线来显示最后两个条形图之间的比较。我无法使用任何方法获取条形的高度，如何绘制它。

这是我正在寻找的示例。

我已经完成了这里的简单流程图代码。我不知道如何处理，因为找不到任何事件或任何给我栏高度的东西。

var data = [
            {data: [[0,1]], color: "red"},
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}
           ];

$.plot("#placeholder",data, {
  series: {
    bars: {
      show: true,
      barWidth: 0.3,
      align: "center",
      lineWidth: 0,
      fill:.75
    }
  },
  xaxis: {
    ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
  }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div>

Answer 1

我找到了解决方案。 Flot 库本身有一个我可以使用的标记选项。它没有为我提供箭头，但至少我可以用它添加一条线。

var data = [
            {data: [[0,1]], color: "red"},
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}
           ];

$.plot("#placeholder",data, {
  series: {
    bars: {
      show: true,
      barWidth: 0.3,
      align: "center",
      lineWidth: 0,
      fill:.75
    },
  },
  grid: {
    markings: [{
      xaxis: { from: 1, to: 2 },
      yaxis: { from: 2, to: 2 },
      color: "#bb0000"
    }]
  },
  xaxis: {
    ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
  }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width: 400px; height: 300px; padding: 0px; position: relative;"></div>