添加自动收报机到Flot条形图

Question

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

以下是我正在寻找的示例。

我完成了简单的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>