如何使用带有工具提示的 ChartJs 或 D3 创建 RRG（相对旋转图）？

Chart.register(ChartDataLabels)
const xMin = 90, xMax = 110;
const yMin = 90, yMax = 110;

const xHalf = (xMin+xMax)/2, xHalfPlus = xHalf + 1e-6,
    yHalf = (yMin + yMax)/2, yHalfDist = (yMax - yMin)/2;
new Chart(document.getElementById('chart'), {
    type: "line",
    data: {
        datasets: [{
            data: [
                {x: xMin, y: yHalf},
                {x: xHalf, y:yHalf},
                {x: xHalfPlus, y: null},
                {x: xMax, y: null}
            ],
            fill: true,
            backgroundColor: "rgba(255, 160, 0, 0.5)",
            pointRadius: 0,
            showLine: false,
            stacked: true,
            order: 1
        }, {
            data: [
                {x: xMin, y: yHalfDist},
                {x: xHalf, y:yHalfDist},
                {x: xHalfPlus, y: null},
                {x: xMax, y: null}
            ],
            fill: "-1",
            backgroundColor: "rgba(0, 255, 255, 0.5)",
            pointRadius: 0,
            showLine: false,
            stacked: true,
            order: 2
        },
            {
            data: [
                {x: xMin, y: null},
                {x: xHalf, y: null},
                {x: xHalfPlus, y: yHalf},
                {x: xMax, y:yHalf}
            ],
            fill: true,
            backgroundColor: "rgba(255, 255, 0, 0.5)",
            pointRadius: 0,
            showLine: false,
            order: 1
        },
        {
            data: [
                {x: xMin, y: null},
                {x: xHalf, y: null},
                {x: xHalfPlus, y: yHalfDist},
                {x: xMax, y:yHalfDist}
            ],
            fill: "-1",
            backgroundColor: "rgba(0, 192, 160, 0.5)",
            pointRadius: 0,
            showLine: false,
            order: 2
        },
        {
            type: "bubble",
            data: [
                {x: 101, y: 97.2, r: 18, label: "ABCD"},
                {x: 102, y: 103.4, r: 11, label: "WEDW"},
                {x: 103, y: 102.2, r: 11, label: "CESA"},
                {x: 98, y: 101.4, r: 11, label: "QWEX"}
            ],
            backgroundColor: 'rgba(64, 64, 128, 0.7)',
            order: 0,
            label: "my data"
        }
    ]},
    options: {
        scales: {
            x: {
                type: "linear",
                min: xMin,
                max: xMax,
            },
            y: {
                min: yMin,
                max: yMax,
                stacked: true,
            }
        },
        plugins:{
            legend:{
                labels:{
                    filter(ctx){
                        // no legend for the four quadrants
                        if(ctx.datasetIndex < 4) return false;
                        return true;
                    }
                }
            },
            datalabels:{
                anchor:'center',
                align: 'center',
                color: '#000',
                clamp: true,
                font: {
                    weight: 'bold'
                },
                formatter: function(value) {
                    //console.log(value)
                    return value.label || ''
                },
            },
            annotation: {
                annotations: {
                    label1: {
                        type: 'label',
                        content: 'Lagging',
                        xValue: xMin,
                        yValue: yMin,
                        position:{x: "start", y: "end"},
                        color: 'rgba(0,0,0,0.6)',
                    },
                    label2: {
                        type: 'label',
                        content: 'Weakening',
                        xValue: xMax,
                        yValue: yMin,
                        position:{x: "end", y: "end"},
                        color: 'rgba(0,0,0,0.6)'
                    },
                    label3: {
                        type: 'label',
                        content: 'Improving',
                        xValue: xMin,
                        yValue: yMax,
                        position:{x: "start", y: "start"},
                        color: 'rgba(0,0,0,0.6)'
                    },
                    label4: {
                        type: 'label',
                        content: 'Leading',
                        xValue: xMax,
                        yValue: yMax,
                        position:{x: "end", y: "start"},
                        color: 'rgba(0,0,0,0.6)'
                    }
                },
                font: {
                    size: 22
                }
            }
        }
    }
});

<div style="width:900px; height: 700px">
    <canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.2.1/chartjs-plugin-annotation.min.js" integrity="sha512-qF3T5CaMgSRNrxzu69V3ZrYGnrbRMIqrkE+OrE01DDsYDNo8R1VrtYL8pk+fqhKxUBXQ2z+yV/irk+AbbHtBAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>