在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以及围绕笔划的边缘，使其适当呈现。