用线条绘制透明条形图？

Question

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

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

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

我有两个问题；

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

这是我正在处理的数据片段：

"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

这是 flot 网站上的 fiddle with the full example. You will see that some bars hide each other, to counter this look at the side-by-side or stacked-bars plugins。

用线条绘制透明条形图？

Flot transparent bar graph with lines?

javascript

graph

flot