Chart.js 可以使用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中我的绘图所示：

---

这可能吗？

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

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
        }]
});

var数据=[
{“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-Subermedio-Derecho
{“x”：25，“y”：-33}，//cuadrante-Subsier-Bajo-Derecho
{“x”：-25，“y”：-33}，//cuadrante-subsier-Bajo-Izquierdo
{“x”：-42，“y”：-14}，//cuadrante-Subermedio-Izquierdo
{“x”：-42，“y”：14}，//cuadrante Superior Medio Izquierdo
]
//警报（JSON.stringify（数据））；
Highcharts.图表（‘Somatocata’{
图表：{
plotBackgroundImage:'https://raw.githubusercontent.com/aledc7/Laravel/master/resources/somatocarta.png',
renderTo:“躯体心脏”，
defaultSeriesType:“散布”，
边框宽度：1，
边框颜色：“#ccc”，
边缘左：90，
marginRight:50，
},
标题：{
正文：'Somatocata'
},
图例：{
已启用：false
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y；
}
},
打印选项：{
系列：{
影子：错，
}
},
xAxis：{
标题：{
文本：'X轴标题'
},
最低：-100，
最高：100，
时间间隔：100，
长度：0，
minorTickLength:0，
网格线宽度：1，
showLastLabel:true，
showFirstLabel:false，
线条颜色：“#ccc”，
线宽：1
},
亚克斯：{
标题：{
文本：“Y轴
标题”，
轮换：0，
差额：25，
},
最低：-100，
最高：100，
时间间隔：100，
长度：3，
minorTickLength:0，
线条颜色：“#ccc”，
线宽：1
},
系列：[{
颜色：“#185aa9”，
数据：数据
}]
});

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

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
        }]
});

var数据=[
{“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-Subermedio-Derecho
{“x”：25，“y”：-33}，//cuadrante-Subsier-Bajo-Derecho
{“x”：-25，“y”：-33}，//cuadrante-subsier-Bajo-Izquierdo
{“x”：-42，“y”：-14}，//cuadrante-Subermedio-Izquierdo
{“x”：-42，“y”：14}，//cuadrante Superior Medio Izquierdo
]
//警报（JSON.stringify（数据））；
Highcharts.图表（‘Somatocata’{
图表：{
plotBackgroundImage:'https://raw.githubusercontent.com/aledc7/Laravel/master/resources/somatocarta.png',
renderTo:“躯体心脏”，
defaultSeriesType:“散布”，
边框宽度：1，
边框颜色：“#ccc”，
边缘左：90，
marginRight:50，
},
标题：{
正文：'Somatocata'
},
图例：{
已启用：false
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y；
}
},
打印选项：{
系列：{
影子：错，
}
},
xAxis：{
标题：{
文本：'X轴标题'
},
最低：-100，
最高：100，
时间间隔：100，
长度：0，
minorTickLength:0，
网格线宽度：1，
showLastLabel:true，
showFirstLabel:false，
线条颜色：“#ccc”，
线宽：1
},
亚克斯：{
标题：{
文本：“Y轴
标题”，
轮换：0，
差额：25，
},
最低：-100，
最高：100，
时间间隔：100，
长度：3，
minorTickLength:0，
线条颜色：“#ccc”，
线宽：1
},
系列：[{
颜色：“#185aa9”，
数据：数据
}]
});

这个答案可能会帮助你找到解决问题的合适方法：我在研究我的解决方案时确实遇到过这篇文章，但不幸的是，它没有解决我试图解决的问题。我不需要数据标签沿着x轴和y轴，但我需要将图表从一个不是（0,0）的特定点分割成四个象限，有点像一个新的psuedo origi