Hover canvas 在其他 div 中的文本

Question

我想在 canvas 甜甜圈旁邊放文字。 此文本基於每張幻燈片的 hover 信息，但不是出現在圖像的頂部，而是我希望它位於圖像旁邊。 （以2張圖片為例）

https://jsfiddle.net/jak2e4zr/

HTML

    <canvas id="myChart" ></canvas>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

---

JS

var ctx = document.getElementById("myChart");
var data = {
    labels: ['Residential', 'Non-Residential', 'Utility'],
    datasets: [
        {
            data: [19, 26, 55],
            weight: 2,
            spacing : 5,
            borderWidth : 0,
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]
};


var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
        circumference: 180,
        rotation: -180,
        
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                displayColors: false,
                titleAlign: 'center',
                xAling: 'center'                    
            }
        },
        hoverOffset: 15,
    }
}); `

圖 1圖 2

謝謝

Answer 1

chart.js 工具提示 object 接受名為position的附加屬性，它會影響工具提示的 Z4757FE07FD492A8BE0EA6A7D60。 默認情況下，它只接受兩個字符串來將模式設置為"average"或"nearest" 。 幸運的是，您可以通過擴展Chart.Tooltip.positioners object 來定義自己的模式。

當您希望您的工具提示位於中間的某個位置時，我們可以做這樣的事情：

Chart.Tooltip.positioners.middle = function(elements, eventPosition) {

    const chart = this._chart;
        return {
            x: chart.chartArea.width/2,
            y: chart.chartArea.height/2
        };
    }

...所以只需查詢圖表的當前尺寸並取其一半。 然后可以通過它的名稱使用此模式"middle" 。

這是一個完整的例子：

 var ctx = document.getElementById("myChart"); Chart.Tooltip.positioners.middle = function(elements, eventPosition) { const chart = this._chart; return { x: chart.chartArea.width / 2, y: chart.chartArea.height / 2 }; } var data = { labels: ['Residential', 'Non-Residential', 'Utility'], datasets: [{ data: [19, 26, 55], weight: 2, spacing: 5, borderWidth: 0, backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] }] }; var myDoughnutChart = new Chart(ctx, { type: 'doughnut', data: data, options: { responsive: false, circumference: 180, rotation: -180, plugins: { legend: { display: false }, tooltip: { position: 'middle', backgroundColor: '#ff0000', titleColor: '#000000', displayColors: false, titleAlign: 'center', xAlign: 'left' } }, hoverOffset: 15, } });

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="myChart"></canvas>