如何使用 Scatter Plot highchart 绘制下图?
How to draw following graph using Scatter Plot highchart?
如何使用 Scatter Plot highchart 绘制下图?
我正在尝试使用 Highcharts 实现这种在屏幕截图中显示的情节。到目前为止,我可以使用散点图在图表上绘制点,但我无法从 X 轴和 Y 轴绘制这两条红线。你们中的任何人都可以在这里帮助我从一个点绘制两条直线,一条朝向 X 轴,第二条朝向 Y 轴。附上的代码只是我用来绘制散点图的JS代码。谢谢
/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Strategic Alignment'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Process & Technology Integration'
},
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
series: [{
name: ' ',
color: 'Red',
data: [[3.1, 3]]
}]
});
});
这是我的代码。
使用renderer.path画一条线。您可以在加载事件上画线,并在重画事件上重画它。[=14=]
events: {
load: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point;
point.path = this.renderer.path()
.add(point.series.group)
.attr({
stroke: point.color,
'stroke-width': 1,
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
});
},
redraw: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point,
path = point.path;
if (path) {
path.attr({
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
})
}
}
}
示例:https://jsfiddle.net/5j208Lpb/
另一种解决方案是定义 2 个附加点,这些点将绘制在绘图区域之外。您需要设置轴限制并将 series.lineWidth 设置为 1.
如何使用 Scatter Plot highchart 绘制下图?
我正在尝试使用 Highcharts 实现这种在屏幕截图中显示的情节。到目前为止,我可以使用散点图在图表上绘制点,但我无法从 X 轴和 Y 轴绘制这两条红线。你们中的任何人都可以在这里帮助我从一个点绘制两条直线,一条朝向 X 轴,第二条朝向 Y 轴。附上的代码只是我用来绘制散点图的JS代码。谢谢
/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Strategic Alignment'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Process & Technology Integration'
},
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
series: [{
name: ' ',
color: 'Red',
data: [[3.1, 3]]
}]
});
});
这是我的代码。
使用renderer.path画一条线。您可以在加载事件上画线,并在重画事件上重画它。[=14=]
events: {
load: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point;
point.path = this.renderer.path()
.add(point.series.group)
.attr({
stroke: point.color,
'stroke-width': 1,
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
});
},
redraw: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point,
path = point.path;
if (path) {
path.attr({
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
})
}
}
}
示例:https://jsfiddle.net/5j208Lpb/
另一种解决方案是定义 2 个附加点,这些点将绘制在绘图区域之外。您需要设置轴限制并将 series.lineWidth 设置为 1.