Dygraphs 中的高亮区间

·  阅读 1037
Dygraphs 中的高亮区间

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情

highlight_region.png

本文,我们来探讨,如何在 Dygraphs 中画出两点之间的区间,如上图。

思路如下:

  • 找出开始的点
  • 找出结束的点
  • 使用 CanvasfillRect 的方法绘制矩形

我们先来认识下 fillRect 方法使用:

fillRect(x, y, width, height) 方法有四个参数:

  • x:矩形左上角针对画布原点的 x 轴距离
  • y:矩形左上角针对画布原点的 y 轴距离
  • width:矩形的宽度,单位是 px
  • height:矩形的高度,单位是 px

比如下面,我绘制一个距离与点(100, 20)距离,且宽高分别是 200150 的矩形:

核心代码:

var canvas = document.getElementById("app"); // 获取画布
var ctx = canvas.getContext("2d"); // 创建画笔
ctx.fillRect(100, 20, 200, 150); // 用画笔在画布上绘制指定的矩形
复制代码

So easy, right?

我们接下来看下完整的实现代码:

new Dygraph(
  document.getElementById("div_g"), // 获取 Dom 节点
  data, // 渲染的相关数据
  {
    labels: ['X', 'Serial1', 'Serial2'], // X 表明是 x 轴的名称,Serial1 和 Serial2 是 y 轴线条的名称
    underlayCallback: function(canvas, area, g) { // 回调函数
      var bottom_left = g.toDomCoords(highlight_start, -20); // 转换成 Canvas 上的坐标点数据
      var top_right = g.toDomCoords(highlight_end, +20);

      var left = bottom_left[0];
      var right = top_right[0]; // 获取右边标记点的 canvas 上对应的数据

      canvas.fillStyle = "rgba(255, 255, 102, 1.0)"; // 绘制矩形的填充颜色
      canvas.fillRect(left, area.y, right - left, area.h); // 绘制矩形
    }

  }
);
复制代码

这里主要是使用了回调函数 underlayCallback,设置之后,在绘制图表之前调用此回调函数。它包含三个参数,如下:

  • context:画布上下文(可以简单理解为画笔🖌️)
  • area:描述绘图区域的对象,该对象包含属性 {x, y, w, h}(读者感兴趣可以自行打印这几个值理解)
  • dygraphdygraph 对象的引用

toDomCoordsdygraphs 中提供的一个能将数据坐标转换成 canvas 坐标的方法。同类型的方法还有 toDomXCoordtoDomYCoord 等。感兴趣的读者可以前往官网了解

往期精彩推荐

如果读者觉得文章还可以,不防一键三连:关注➕点赞➕收藏

分类:
前端
收藏成功!
已添加到「」, 点击更改