Рисование простого графика с использованием проецируемых линий

Question

Мне нужно нарисовать довольно простой график для веб-проекта.

Данные всегда будут одинаковыми, поэтому линия графика не изменится. Тем не менее, мне нужно рисовать поверх прогнозируемых строк графика 2, выделяя некоторые аспекты графика. Эти строки будут меняться в зависимости от некоторой переменной. Вот что я пытаюсь достичь:

Я смотрел на Chart.js, чартистских и несколько других библиотек, но не видел никаких примеров, которые будут рисовать те проецируемые линии, которые мне нужны.

Может кто-нибудь указать мне в библиотеку, которая может это сделать?

Answer 1

Вы можете достичь этого с помощью высоких диаграмм.

я нашел почти точно устраивающего пример и слегка изменил его: http://jsfiddle.net/mt2becws/1/

Ниже приведены вызовы настройки «перекрестие» после того, как некоторое время:

setTimeout(function() { 
    addCrosshair(3,14.5); 
}, 1000); 

setTimeout(function() { 
    addCrosshair(2,5.7); 
}, 2000); 

и часть кода действительно делает это:

function addCrosshair(x,y) { 
chart.xAxis[0].addPlotLine({ 
    id: 'xPlotLine'+x, 
    value: x, 
    width: 1, 
    color: '#C0C0C0' 
}); 

chart.yAxis[0].addPlotLine({ 
    id: 'yPlotLine'+y, 
    value: y, 
    width: 1, 
    color: '#C0C0C0' 
}); 
} 

Answer 2

Успели сделать это с помощью D3, следуя примеру здесь My Favorite tooltip method for a line graph

Пришлось изменить несколько вещей, например, позиционирование всплывающих подсказок (также используя для этого divs, чтобы я мог их также стилизовать) и остановить проецируемую линию x, где она встречает путь графика, среди прочего.

Но вот снимок результата: