用線繪制透明條形圖？

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

這是完整示例的擺弄 。 您會看到一些酒吧相互隱藏起來，以對抗在flot網站上並排或堆疊的酒吧插件 。