在 billboard.js 中为多台设备构建二进制状态图答案

【问题标题】：Building a binary state chart in billboard.js for multiple pieces of equipment在 billboard.js 中为多台设备构建二进制状态图
【发布时间】：2017-11-03 22:47:09
【问题描述】：

我第一次尝试使用 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。

【问题讨论】：

标签： javascript d3.js charts

【解决方案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;
  }
},

【讨论】：

这并没有直接回答我的问题，因为我的目标是将多个开/关状态放在同一个“图表”上，但放在不同的行上，而不修改默认的 0 或 1 值的数据.看起来我可以使用您的部分答案来解决我的问题，方法是使用 axis.y.format 更改刻度值并使用 onrendered 来移动系列元素的位置，就像我希望的那样。在此通过后，我将发表另一条评论。
这将有助于实现我在上一条评论中描述的目标。标记为答案。
如果您需要更多帮助，用图片描述会更清楚了解您的需求。无论如何，希望答案会有所帮助:)

【解决方案2】：

自从使用此答案以来，我还发现了一种将数据显示为折线图的更好方法。由于散点图的默认不透明度，散点图看起来很奇怪，重叠点会产生不同的颜色。

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 以及圆化笔触的边缘，使其正确呈现。

【讨论】：

【解决方案3】：

正如Jae Sung Park 提到的，解决方案包括使用axis.y.tick.format 更改轴刻度标签和使用onrendered 函数，如下所示。

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~~已删笔

【讨论】：