在billboard.js中爲多件設備構建一個二進制狀態圖

Question

我試圖用billboard.js首次製作一些圖表，並且遇到了一個似乎並不容易表示的情況。我想在一段時間內在一個圖表中顯示多個項目的二進制（開/關）狀態。開關期間預計會持續一段合理的時間，所以我希望能夠使用x軸的時間和y軸的類別來顯示這些信息，其中一行顯示從左到右的項目開啓時的行數，而沒有行時的行數它已關閉。

我已經嘗試了一些在billboard.js中使用現有圖表類型的實現，而且我可以得到的最接近的是散點圖，其中包含重疊點以創建「線條」。這還要求操作'on'值以允許在圖表上顯示多行（因此它們不會在1值上重疊）下面的代碼顯示了該設置以及「on」數據操作的方式，或1值將需要顯示每個圖表多個項目。

bb.generate({ 
bindto: "#chart", 
data: { 
    columns: [ 
     ["item1", 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0], 
     ["item2", 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0, 0] 
    ], 
    type: 'scatter', 
    colors: { 
     data1: "red", 
     data2: "green" 
    }, 
}, 
axis: { 
    y: { 
    min: 1, 
    max: 2, 
    tick: { 
     values: [1,2], 
    }, 
    }, 
}, 
point: { 
    r: 10, 
    focus: { 
    expand: { 
     enabled: false, 
    } 
    } 
}, 
tooltip: { 
    show: false, 
}, 

}）;

（https://codepen.io/CodeRequiem/pen/rYeejz）

我考慮的只是改變了直D3，但想知道如果任何人有一個更好的方式來billboard.js內處理這個任何建議。一個附加的問題是如何顯示在y軸上的值作爲ITEM1和代替ITEM2的1和2

Answer 1

1）開/關狀態中的線段表示

我不知道這是否是您要顯示的內容，但是您可以按照以下設置更改尺寸和y軸填充選項。

• 工作示例：使用https://codepen.io/netil/pen/JOXMZW

bb.generate({ 
 
    bindto: "#chart", 
 
    size: { 
 
     height: 80 
 
    }, 
 
    data: { 
 
     columns: [ 
 
      ["item1", null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null, null, 1, 1, 1, 1, null], 
 
      ["item2", 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null, 2, 2, 2, null, null, null] 
 
     ], 
 
     type: 'scatter', 
 
     colors: { 
 
      data1: "red", 
 
      data2: "green" 
 
     }, 
 
    }, 
 
    axis: { 
 
     y: { 
 
     padding: { 
 
      top: 180, 
 
      bottom: 180 
 
     }, 
 
     tick: { 
 
      values: [1,2], 
 
      format: function(x) { 
 
      return "item"+ x; 
 
      } 
 
     }, 
 
     }, 
 
    }, 
 
    point: { 
 
     r: 10 
 
    }, 
 
    interaction: { 
 
     enabled: false 
 
    }, 
 
    clipPath: false 
 
});

，或者你可以直接操作數據的元素位置onrendered選項

• https://codepen.io/netil/pen/NwNXjE

onrendered: function() { 
 
     this.data.targets.forEach(function(v) { 
 
     var id = v.id; 
 
     var y = id === "item1" ? -120 : 100; 
 
     
 
     d3.select(".bb-chart-line.bb-target-"+ id) 
 
      .style("transform", "translateY("+ y +"px)"); 
 
     }) 
 
    }

2）改變y軸的值

可以使用該axis.y.format選項。

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.axis:y:format

tick: { 
 
    format: function(x) { 
 
    return "item"+ x; 
 
    } 
 
},

Answer 2

如Jae Sung Park所提到的，所述溶液包括使用axis.y.使用tick.format更改軸刻度標籤並使用如下所示的渲染函數。

bb.generate({ 
axis: { 
    y: { 
    tick: { 
     values: [1, 2], 
     format: function(x) { 
     if (x === 1) { 
      return 'item1'; 
     } 
     return 'item2'; 
     }, 
    }, 
    }, 
}, 
onrendered: function() { 
    this.data.targets.forEach(function(v) { 
    var id = v.id; 
    var y = id === "heat" ? -25 : 0; 

    d3.select(".bb-chart-line.bb-target-"+ id) 
     .style("transform", "translateY("+ y +"px)"); 
    }) 
} 

}）;

完全CodePen例如這裏： https://codepen.io/CodeRequiem/pen/rYeejz 刪除筆

Answer 3

自從使用這個答案的時候，我也發現了一個更好的方式來顯示數據...作爲一個折線圖。由於散點圖的默認不透明度，散點圖看起來很奇怪，重疊點產生不同的顏色。

https://codepen.io/CodeRequiem/pen/rYeejz

CSS 
.bb-line { 
    stroke-width: 10px !important; 
    stroke-linecap: round; 
} 

JS 
var chart2 = bb.generate({ 
size: { 
    height: 102, 
}, 
bindto: "#chart2", 
data: { 
    columns: [ 
     ["heat2", ...same data], 
     ["cool2", ...same data] 
    ], 
    type: 'line', 
    colors: { 
     'heat2': "orange", 
     'cool2': "blue" 
    }, 
}, 
axis: { 
    y: { 
    tick: { 
     format: function(x) { 
     if (x === 1) { 
      return 'cool2'; 
     } 
     return 'heat2'; 
     }, 
    }, 
    }, 
}, 
point: { 
    r: 1 
}, 
onrendered: function() { 
    this.data.targets.forEach(function(v) { 
    var id = v.id; 
    var y = id === "heat2" ? -25 : 0; 

    d3.select(".bb-chart-line.bb-target-"+ id) 
     .style("transform", "translateY("+ y +"px)"); 
    }) 
} 

}）;

正如你在上面的codepen中看到的，產生相同的結果，但是有一行。這樣可以避免我在散點圖不透明點和重疊點看起來很奇怪時遇到的問題。我更新了css，以包括stroke-linecap：round以及圍繞筆劃的邊緣，使其適當呈現。