Как добавить случайные отметки на линейном графике в определенной позиции - PullRequest
Новая
       34

Как добавить случайные отметки на линейном графике в определенной позиции

0 голосов
/ 02 мая 2019

Я пытаюсь построить верхнюю диаграмму с одной серией и добавить несколько точек, которые отмечены в разных стилях на одной линии.

Например:

Я пытаюсь построить неделю (дату и время) по оси 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 - Отправить по электронной почте рабочее состояние на этой неделе

Я пытаюсь построить линейный график временного ряда и пытаюсь добавить маркер для напоминания к существующему линейному графику в случайных местах, у которого есть всплывающая подсказка с некоторой информацией, связанной с ним.

Я пытался построить линейный график с двумя сериями, но не смог достичь ожидаемого результата. https://jsfiddle.net/2vtyrc9q/3/

[JSFiddle Demo][1]

expected output

1 Ответ

1 голос
/ 02 мая 2019

Вы можете предварительно обработать ваши данные и вычислить 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/

...