[英]Drawing rectangles on a line graph
I have a straightforward line chart. 我有一个简单的折线图。
I'd like to let a user draw rectangles over the top of the graph that snap to the gridlines. 我想让用户在图的顶部绘制与网格线对齐的矩形。 See here for a visual example:
请参见此处的直观示例:
I've had a look at Highcharts and d3 but neither have a facility that allows the user to 'draw' on top of graphs. 我看过Highcharts和d3,但都没有一种工具可以让用户在图形上方进行“绘制”。
Before diving into the APIs and/or reinventing the wheel with lots of code, I was hoping someone has achieved this (or something similar) before, or could point me in the right direction? 在深入研究API和/或用大量代码重新发明轮子之前,我希望有人在之前已经做到这一点(或类似的东西),或者可以指出正确的方向吗?
Speaking from my experience with Highcharts, you can absolutely draw on top of graphs. 从我在Highcharts的经验来看,您绝对可以在图表之上绘制。 It's simply a matter of how you want to go about it.
这只是您要如何处理的问题。
I can think of two ways to pursue this goal: 我可以想到两种实现该目标的方法:
showInLegend: false
) and prevent them from being interacted with by the user ( enableMouseTracking: false
). showInLegend: false
),并防止它们与用户进行交互( enableMouseTracking: false
)。 renderer.rect
method to draw rectangles in your chart (see http://api.highcharts.com/highcharts#Renderer.rect ). renderer.rect
方法在图表中绘制矩形(请参阅http://api.highcharts.com/highcharts#Renderer.rect )。 Here's a basic example taken from Highcharts' API documentation: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect-on-chart/ The API documentation is chock full of examples. API文档中包含许多示例。 I hope this has been helpful in your quest.
我希望这对您的追求有所帮助。
You can use the the columnRange series in combination with line. 您可以将columnRange系列与line结合使用。
plotOptions: {
columnrange: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 1,
borderColor: 'black'
}
},
legend: {
enabled: false
},
series: [{
type: 'line',
data: [
[12, -20],
[2, -10]
]
}, {
color: 'rgba(0,0,0,0)',
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
Example: 例:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.