将代码添加到 Flot 条形图答案

【问题标题】：Add ticker to Flot bar chart将代码添加到 Flot 条形图
【发布时间】：2017-01-05 04:32:25
【问题描述】：

我使用 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>

【问题讨论】：

标签： javascript jquery css bar-chart flot

【解决方案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>

【讨论】：