如何在折线图上的特定位置添加随机刻度

Question

我正在尝试绘制具有单个系列的图表，并在同一行上添加一些以不同样式标记的点。

例如：

我试图在x轴上绘制一周（日期和时间）以及该周（5天）的可用小时数。

可用时间：

• 2019年1月1日08:00至10:00
• 2019年1月1日18:00至21:00
• 2019年1月2日05:00至08:00
• 2019年1月2日19:00至21:00
• 2019年1月3日21:00至23:00
• 2019年1月4日19:00至20:00
• 2019年1月5日08:00至21:00

提醒：

• 2019年1月1日09:30-发送包含目标商品的电子邮件
• 2019/01/03 22:30-发送本周剩余任务的列表
• 2019年4月1日19:30-完成本周的待处理项目
• 01/05/2019 12:00-单元测试已完成任务
• 01/05/2019 20:30-发送有关本周工作状态的电子邮件

我正在尝试绘制时间序列折线图，并尝试在随机位置向现有折线图添加提醒的标记，该标记具有工具提示并链接了一些信息。

我尝试绘制2系列的折线图，但无法实现预期的输出。 https://jsfiddle.net/2vtyrc9q/3/

[JSFiddle Demo][1]

Answer 1

您可以预处理数据并计算第二个系列的y值：

var stages = [
        [0, 10],
        [2, 30],
        [5, 15],
        [10, 12]
    ],
    checkpoints = [1, 3, 4, 7],
    j = 1,
    i = 0;

for (i; i < checkpoints.length; i++) {
    if (checkpoints[i] < stages[j][0]) {
        checkpoints[i] = [checkpoints[i], calculateY(i, j)];
    } else {
        for (j; j < stages.length; j++) {
            if (checkpoints[i] < stages[j][0]) {
                checkpoints[i] = [checkpoints[i], calculateY(i, j)];
                break;
            }
        }
    }
}

function calculateY(i, j) {
    var difference,
        step;

    difference = stages[j][1] - stages[j - 1][1];
    step = difference / (stages[j][0] - stages[j - 1][0]);
    return stages[j - 1][1] + step * (checkpoints[i] - stages[j - 1][0]);
}

Highcharts.chart('container', {
    series: [{
        data: stages
    }, {
        type: 'scatter',
        data: checkpoints
    }]
});

实时演示： http://jsfiddle.net/BlackLabel/83ankjpf/