Dygraph 模拟柱状图的绘制

站长

2023年07月30日 07:32 · 阅读数 19

在 Dygraph 中，如果我们想展示竖线的时候，我们应该怎么做呢？

一开始，想着直接手动 canvas 绘图？但是跟 Dygraph 上的默认行为，比如 hover 要做适配，很是麻烦。那么 Dygraph 中就没有实现的方法了？

直到我看到了官网中案例图：

Dygraph 模拟柱状图的绘制

详见 Independent Series。

呀呀呀～我们调整下数据结构，看看能否实现。

let data = [
  [new Date('2023-01-01'), 1],
  [new Date('2023-01-01'), 0],
  [new Date('2023-01-01'), null],
  [new Date('2023-02-01'), 2],
  [new Date('2023-02-01'), 0],
  [new Date('2023-02-01'), null],
  [new Date('2023-04-01'), 3],
  [new Date('2023-04-01'), 0],
  [new Date('2023-04-01'), null]
];

Dygraph 模拟柱状图的绘制

如果我们更改下数据结构呢？比如：

let data = [
  [new Date('2023-01-01'), null],
  [new Date('2023-01-01'), 1],
  [new Date('2023-01-01'), 0],
  [new Date('2023-02-01'), null],
  [new Date('2023-02-01'), 2],
  [new Date('2023-02-01'), 0],
  [new Date('2023-04-01'), null],
  [new Date('2023-04-01'), 3],
  [new Date('2023-04-01'), 0]
];

将 null 提前，不行。阻断了 hover 的读数行为～

既然可以通过整合数据来达到绘制竖线的效果，那么，我们就可以通过控制 strokeWidth 参数模拟柱形图的宽度。比如：

new Dygraph(dom, data, {
  strokeWidth: 10
});

Dygraph 模拟柱状图的绘制

还不错。然后我们根据需求再美化下。比如俺实现的效果：

Dygraph 模拟柱状图的绘制

参考

Official Website - Dygraph