如何在 Highchart 图表上绘制椭圆(椭圆)
How to draw an allipse (oval) on a Highchart graph
我有两个系列和它们的交点。我想在图表上有一个椭圆形(椭圆形),中心位于交叉点。应根据轴单位设置椭圆半径,以显示每个轴的感兴趣区域。
Highcharts.chart('container', {
series: [
// first series
{
name: 'IPR',
data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
},
// second series
{
name: 'VLP',
data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
},
// intersection
{
name: 'Operating point',
data: [
[22.42, 23.35]
]
}
],
})
如何以编程方式在相交处绘制椭圆并进行缩放?
画圆、线等SVGRenderer can be used. But there is no method to draw an ellipse. However rect()可以使用圆角。
可以使用以下代码绘制一个点为(100, 200) px、水平半径为20 px、垂直半径为10 px的椭圆:
chart.renderer.rect(100, 100, 20, 10, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
zIndex: 0
})
.add();
要根据轴单位指定 x、y 和半径,可以使用 Axis.toPixels()。如果我们需要将点 (22.42, 23.35) 转换为像素,可以这样做:
var x = chart.xAxis[0].toPixels(22.42),
y = chart.yAxis[0].toPixels(23.35)
因此绘制椭圆的函数为:
var drawEllipse = function(chart, x, y, xr, yr) {
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
$('.' + rectClass).remove()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
'zIndex': 0
})
.add();
};
最终 redraw 事件可用于缩放后重绘椭圆:
$(function() {
var drawEllipse = function(chart, x, y, xr, yr) {
// get pixel coordinates of rect
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
// remove previous ellipse
var rectClass = 'operating-point-ellipse'
$('.' + rectClass).remove()
// draw ellipse using rect()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'green',
'fill-opacity': 0.2,
'zIndex': 0
})
.addClass(rectClass)
.add();
};
$('#container').highcharts({
chart: {
events: {
redraw: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
},
load: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
}
}
},
//...
});
});
查看 jsFiddle 上的完整代码:http://jsfiddle.net/arybalko/rcct2r0b/
您可以使用 Renderer.createElement
在 Highcharts 中创建其他 SVG 元素:
this.renderer.createElement('ellipse').attr({
cx: 60,
cy: 60,
rx: 50,
ry: 25,
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
}).add();
如@Anton Rybalko 建议的那样,要转换为轴单位,请使用 toPixels
。
现场演示: http://jsfiddle.net/kkulig/ds6aj5yp/
API 参考文献:
SVG 渲染器并不是一个很好的答案。
要用到多边形特征(点多,可以后台离线生成,也可以前端解析):
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
[180, 60], [173, 52], [166, 45]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}
我有两个系列和它们的交点。我想在图表上有一个椭圆形(椭圆形),中心位于交叉点。应根据轴单位设置椭圆半径,以显示每个轴的感兴趣区域。
Highcharts.chart('container', {
series: [
// first series
{
name: 'IPR',
data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
},
// second series
{
name: 'VLP',
data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
},
// intersection
{
name: 'Operating point',
data: [
[22.42, 23.35]
]
}
],
})
如何以编程方式在相交处绘制椭圆并进行缩放?
画圆、线等SVGRenderer can be used. But there is no method to draw an ellipse. However rect()可以使用圆角。
可以使用以下代码绘制一个点为(100, 200) px、水平半径为20 px、垂直半径为10 px的椭圆:
chart.renderer.rect(100, 100, 20, 10, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
zIndex: 0
})
.add();
要根据轴单位指定 x、y 和半径,可以使用 Axis.toPixels()。如果我们需要将点 (22.42, 23.35) 转换为像素,可以这样做:
var x = chart.xAxis[0].toPixels(22.42),
y = chart.yAxis[0].toPixels(23.35)
因此绘制椭圆的函数为:
var drawEllipse = function(chart, x, y, xr, yr) {
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
$('.' + rectClass).remove()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
'zIndex': 0
})
.add();
};
最终 redraw 事件可用于缩放后重绘椭圆:
$(function() {
var drawEllipse = function(chart, x, y, xr, yr) {
// get pixel coordinates of rect
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
// remove previous ellipse
var rectClass = 'operating-point-ellipse'
$('.' + rectClass).remove()
// draw ellipse using rect()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'green',
'fill-opacity': 0.2,
'zIndex': 0
})
.addClass(rectClass)
.add();
};
$('#container').highcharts({
chart: {
events: {
redraw: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
},
load: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
}
}
},
//...
});
});
查看 jsFiddle 上的完整代码:http://jsfiddle.net/arybalko/rcct2r0b/
您可以使用 Renderer.createElement
在 Highcharts 中创建其他 SVG 元素:
this.renderer.createElement('ellipse').attr({
cx: 60,
cy: 60,
rx: 50,
ry: 25,
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
}).add();
如@Anton Rybalko 建议的那样,要转换为轴单位,请使用 toPixels
。
现场演示: http://jsfiddle.net/kkulig/ds6aj5yp/
API 参考文献:
SVG 渲染器并不是一个很好的答案。
要用到多边形特征(点多,可以后台离线生成,也可以前端解析):
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
[180, 60], [173, 52], [166, 45]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}