canvas画心电图，心电图在网格中可以左右拖动

Question

想用canvas画心电图，可以造数据，格式如下：

var test_data = {
    "data": [{
        "seq": 36687,
        "vol": [63.27994918823242, 63.282066345214844, 63.28112030029297, 63.27827453613281, 63.27593231201172],
        "time": "2012-07-18-21-42-13-034",
        "hrate": 0,
        "status": 0
    }, {
        "seq": 36688,
        "vol": [63.24958038330078, 63.249080657958984, 63.25041580200195, 63.25270080566406, 63.254817962646484],
        "time": "2012-07-18-21-43-13-072",
        "hrate": 0,
        "status": 0
    }],
    "packetlossrate": 0,
    "time": "2012-07-18-21-42-13-017"
};

效果图如下：

需求是，心电图可以在网格中左右拖动。

万谢！！

Answer 1

时间为长度，数值为高度
至于你说的拖动，如果是改变比例就换算比例，如果是增加时间就增加时间

Answer 2

方案一：

拖动时使用 tranlate() 方法改变画布的坐标，并进行重绘。

方案二：

根据时长设置画布的长度，并放置在一个定宽的容器中，拖动时移动画布的位置。

Answer 3

• 初始化时，渲染所有心电图或者一部分，但只显示一屏

• 实现canvas容器的拖动事件，在该事件中控制transform或其他定位属性，达到拖动显示其他部分的目的

• 如果允许用百度的Echarts的话，可以很容易做到如图效果，可以拖动：

Answer 4

多少钱？就是直接基于canvas来写，没啥方法。