Question

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

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

表示温度的线图表示设备何时处于活动状态的条形图（在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

这是一个fiddle的完整示例。你会看到一些酒吧互相隐藏，以反击这一点在flot网站上的并排或堆叠条plugins。

用线条绘制透明条形图？

1 个答案: