根据JSON数据创建时间线图表

Question

我想从josn数据创建一个时间表。时间在上午8:00至下午6.00之间。

图表中有

图样式。

这是json数据样本 var data = [{ start: 0, duration: 15, title: "Exercise" }, { start: 25, duration: 30, title: "Travel to work" }, { start: 30, duration: 30, title: "Plan day" }, { start: 60, duration: 15, title: "Review yesterday's commits" }, { start: 100, duration: 15, title: "Code review" }, { start: 180, duration: 90, title: "Have lunch with John" }, { start: 360, duration: 30, title: "Skype call" }, { start: 370, duration: 45, title: "Follow up with designer" }, { start: 400, duration: 30, title: "Push up branch" } ];

在图表y轴中，时间从8到6间隔30分钟显示。每个项目的工作时间/持续时间以每个项目的宽度表示。如果任务从每小时开始，或者任务从每小时30分钟开始，则将值左对齐。在两者之间开始的任务与中心对齐。也就是说，如果任务从上午8:00开始，则从头开始，如果任务从8.25开始，则它与中心对齐。

在图表中，第一个任务从8.00开始，因此它向左对齐。 第二个任务从8.25开始，因此它与中心对齐。 第三次从8.30开始，因此它向左对齐。

在json数据中，start表示开始时间，即8.00 am，duration表示持续时间。 json数据的第二项，start是25表示任务从8.25开始。

我只能显示时间，我不知道如何使用json中的值并比较时间。

getTimeArray = () =>{
        var x = 30; //minutes interval
        var times = []; // time array
        var tt = 60*8; // start time
        var ap = ['AM', 'PM']; // AM-PM

        //loop to increment the time and push results in array
        for (var i=0;tt<19*60; i++) {
        var hh = Math.floor(tt/60); // getting hours of day in 0-24 format
        var mm = (tt%60); // getting minutes of the hour in 0-55 format
        times[i] = ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2); // pushing data in array in [00:00 - 12:00 AM/PM format]
        tt = tt + x;
        }
        return times;
    }

我使用此函数获取8到6的时间间隔。如何使用该值和json数据值获取图像中的图形。