在billboard.js中为多件设备构建一个二进制状态图
我试图用billboard.js首次制作一些图表,并且遇到了一个似乎并不容易表示的情况。我想在一段时间内在一个图表中显示多个项目的二进制(开/关)状态。开关期间预计会持续一段合理的时间,所以我希望能够使用x轴的时间和y轴的类别来显示这些信息,其中一行显示从左到右的项目开启时的行数,而没有行时的行数它已关闭。在billboard.js中为多件设备构建一个二进制状态图
我已经尝试了一些在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
1)开/关状态中的线段表示
我不知道这是否是您要显示的内容,但是您可以按照以下设置更改尺寸和y轴填充选项。
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: 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;
}
},
如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
删除笔
自从使用这个答案的时候,我也发现了一个更好的方式来显示数据...作为一个折线图。由于散点图的默认不透明度,散点图看起来很奇怪,重叠点产生不同的颜色。
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以及围绕笔划的边缘,使其适当呈现。
这并没有直接回答我的问题,因为我的目标是将多个开/关状态放在同一个“图表”上,但在单独的行上,而不用修改默认的0或1值中的数据。它看起来像我可以使用你的答案的部分来解决我的问题,通过使用axis.y.format来更改刻度值,并通过使用投影来移动系列元素的位置,因为我希望。我会在通过此后发布另一条评论。 – CodeRequiem
这将有助于实现我上一次评论中描述的目标。标记为答案。 – CodeRequiem
如果您需要更多帮助,使用图像描述将更加清晰地了解您的需求。无论如何,希望答案有帮助:) –