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

Question

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

例如：

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

可用时间：

01/01/2019 08:00 至 10:00
01/01/2019 18:00 至 21:00
01/02/2019 05:00 至 08:00
01/02/2019 19:00 至 21:00
01/03/2019 21:00 至 23:00
01/04/2019 19:00 至 20:00
01/05/2019 08:00 至 21:00

提醒：

01/01/2019 09:30 - 发送包含目标项目的电子邮件
01/03/2019 22:30 - 发送本周剩余任务列表
01/04/2019 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/

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

How to add random ticks on a line chart at a specific position

javascript

highcharts

highcharts-ng

angular