可以使用 ChartJS 创建象限图，"原点"集中在一个点上吗？

Question

我正试图使用ChartJS为一组值绘制象限图，我想知道是否有一种方法可以在绘制图表时将象限的原点居中于某个动态点，并用标签将图表划分为不同的象限。以下是我现在的散点图：

ChartJS的散点图图像。

散点图使用以下JavaScript完成：

var ctxScatter = document.getElementById('myChartScatter');
var scatterChart = new Chart(ctxScatter, {
type: 'scatter',
data: {
datasets: [{
label: 'Data Point',
backgroundColor: 'royalblue',
pointRadius: 5,
pointHoverRadius: 10,
data: [{x: 10.25, y: 89}, {x: 12.60, y: 69}, {x: 11.23, y: 78}, {x: 11.82, y: 71},
{x: 12.21, y: 85}, {x: 10.84, y: 75}, {x: 9.86, y: 86}, {x: 11.82, y: 62},
{x: 13.00, y: 79}, {x: 13.19, y: 74}, {x:12.02, y: 69}, {x: 14.76, y: 81},
{x: 13.39, y: 79}, {x: 9.66, y: 75}, {x:12.21, y: 78}, {x: 12.60, y: 77}]
}, {
label: '1st Quartile',
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'seagreen',
pointRadius: 7,
pointHoverRadius: 14,
data: [{x: 10.15, y: 85}]
}, {
label: 'Average',
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'orange',
pointRadius: 7,
pointHoverRadius: 14,
data: [{x: 11.97, y: 77}]
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {            
callback: function(value){return "$" + value}
}, 
scaleLabel: {
display: true,
labelString: "Cost"
}
}],
yAxes: [{
ticks: {            
callback: function(value){return value + "%"}
}, scaleLabel: {
display: true,
labelString: "Satisfaction"
}
}]
}
}
});

散点图效果很好，但我需要黄点位于死点，作为四个象限的固定原点，并通过这个原点画一条垂直和水平线，将图表划分为标记的象限，如下所示，来自我在Excel中的绘图：

Excel中象限图的图像。

这可能吗？

Answer 1

我也需要这个，在这里我分享了我制作的模型。我希望它能帮助你。

https://jsfiddle.net/aledc/1m89wju0/2/

HTML代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="somatocarta" style="height:450px;width:500px;"></div>

JAVASCRIPT代码：

var data = [
{"x":0,"y":0},      // en el Centro
{"x":-10,"y":30},   // cuadrante Superioro Alto Izquierdo
{"x":15,"y":35},    // cuadrante Superior Alto Derecho
{"x":45,"y":13},    // cuadrante Superior Medio Derecho
{"x":52,"y":-13},   // cuadrante Inferior Medio Derecho
{"x":25,"y":-33},   // cuadrante Inferior Bajo Derecho
{"x":-25,"y":-33},  // cuadrante Inferior Bajo Izquierdo
{"x":-42,"y":-14},  // cuadrante Inferior Medio Izquierdo   
{"x":-42,"y":14},   // cuadrante Superior Medio Izquierdo
]
//alert(JSON.stringify(data));

Highcharts.chart('somatocarta', {
chart: {
plotBackgroundImage: 'https://raw.githubusercontent.com/aledc7/Laravel/master/resources/somatocarta.png',
renderTo: 'somatocarta',
defaultSeriesType:'scatter',
borderWidth:1,
borderColor:'#ccc',
marginLeft:90,
marginRight:50,
},
title:{
text:'Somatocarta'
},
legend:{
enabled:false                                
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions: {
series: {
shadow:false,
}
},
xAxis:{
title:{
text:'X Axis Title'
},
min:-100,
max:100,
tickInterval:100,
tickLength:0,
minorTickLength:0,
gridLineWidth:1,
showLastLabel:true,
showFirstLabel:false,
lineColor:'#ccc',
lineWidth:1                
},
yAxis:{
title:{
text:'Y Axis<br/>Title',
rotation:0,
margin:25,
},
min:-100,
max:100,
tickInterval:100,
tickLength:3,
minorTickLength:0,
lineColor:'#ccc',
lineWidth:1        
},
series: [{
color:'#185aa9',
data: data
}]
});