使用投影线绘制简单图形

Question

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

数据总是相同的，所以图表行不会改变。不过，我需要在图2的投影线的顶部绘制，突出显示图的某个方面。这些行会根据一些变量而改变。 这是我想实现：

我看着chart.js之，宪章和其他一些库，但没有看到将绘制，我需要那些投射线的任何实例。

有人可以请我指向一个图书馆，可以做到这一点？

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行，以满足图形路径。

但这里是结果的快照：