用线条浮动透明条形图？

Question

我在使用 flot 创建折线图方面取得了巨大成功，部分原因在于该论坛的回复质量！

但是，要么我正在尝试做一些特别的事情，要么无法弄清楚搜索词。我正在尝试在同一张图上绘制两个数据集：

代表温度的折线图 表示设备何时处于活动状态（在 RRD 中为 1 或 0 值）的条形图。我希望这些作为透明背景栏，以便我可以查看设备是否正确触发以及它开启了多长时间。

我有两个问题；

• 我无法将设备数据显示为透明图表。仅行数据
• 我还没有尝试将两个数据集合并到一个图表中。我希望设备条数据显示为一个完整的垂直条，现在 y 轴是从 0 到 1.2，所以图表顶部有一个间隙。当我尝试使用第二个轴时，我得到了右侧的数字，但折线图没有正确显示它的轴。

这是我正在处理的数据的 sn-p：

"data" : [
     {
        "bars" : {
           "fillColor" : {
              "colors" : [
                 {
                    "opacity" : 1
                 },
                 {
                    "opacity" : 1
                 }
              ]
           },
           "lineWidth" : 0,
           "show" : "true"
        },
        "color" : "blue",
        "data" : [
           [
              "1421280000000",
              "0"
           ],
           [
              "1421452800000",
              "0"
           ],
           [
              "1421625600000",
              "0"
           ],
           [
              "1421798400000",
              "1"
           ],
           [
              "1421971200000",
              "1"
           ],
           [
              "1422144000000",
              "1"
           ],
           [
              "1422316800000",
              "0"
           ],
           [
              "1422489600000",
              "0"
           ],
           [
              "1422662400000",
              "0"
           ],
           [
              "1422835200000",
              "0"
           ]
        ]
    }
        "label" : "D1",
        "yaxes" : 1
     },
     {
        "bars" : {
           "fillColor" : {
              "colors" : [
                 {
                    "opacity" : 1
                 },
                 {
                    "opacity" : 1
                 }
              ]
           },
           "lineWidth" : 0,
           "show" : "true"
        },
        "color" : "red",
        "data" : [
           ]
              "1421280000000",
              "1"
           ],
           [
              "1421452800000",
              "1"
           ],
           [
              "1421625600000",
              "1"
           ],
           [
              "1421798400000",
              "0"
           ],
           [
              "1421971200000",
              "1"
           ],
           [
              "1422144000000",
              "0"
           ],
           [
              "1422316800000",
              "0"
           ],
           [
              "1422489600000",
              "0"
           ],
           [
              "1422662400000",
              "1"
           ],
           [
              "1422835200000",
              "0"
           ]
        ],
        "label" : "D2",
        "yaxes" : 1
     }  
  ],

Answer 1

您的条形的默认宽度为 1 x 轴单位，并且由于您的 x 值太大，这意味着条形的宽度为 0 像素。将类似这样的内容添加到您的 bars 选项中，以使它们更宽并从那里继续：

"barWidth": 24 * 60 * 60 * 1000, // 1 day in milliseconds

这是带有完整示例的fiddle。您会看到一些条形图相互隐藏，为了应对这种情况，请查看 flot 网站上并排或堆叠的条形图 plugins。