使用投影线绘制简单的图形

Question

我需要为Web项目绘制一个相当简单的图形。

数据将始终相同，因此图形线不会更改。但是，我需要在图2的顶部绘制投影线，突出显示图的某些方面。这些行将根据某些变量而变化。 这是我想要实现的目标：

我查看了Chart.js，Chartist和其他一些库，但没有看到任何可以绘制我需要的那些投影线的例子。

有人可以指点我到一个可以做到这一点的图书馆吗？

Answer 1

你可以用highcharts实现它。

我找到了一些几乎完全合适的例子，并略微修改了它： 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

不得不修改一些东西，比如工具提示的定位（也使用div，这样我也可以设置它们的样式）并停止投影的x线，它符合图形路径，等等。

但这是结果的快照：