如何從 ChartJS 的回調中返回 JSX？

Question

我在 React 應用程序中使用react-chartjs-2 ，我想將 JSX 代碼放入 Y 軸。 當我嘗試這樣做時，它只顯示[Object object] 。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return <p>This is JSX</p>;
                    }
                }
            }
        }
    }
});

如何使用 JSX 元素創建圖表？

Answer 1

簡短回答：你不能

解釋：
由於 chart.js 是一個基於 canvas 的庫，它不使用 dom 元素在圖表上顯示內容。 為此，您需要使用 svg 庫，例如 recharts。

因此，默認情況下，您必須受回調允許您執行的操作的約束。 如果你想要更多的定制，你需要編寫一個自定義插件，使用 canvas API 在 canvas 本身上繪制你想要的東西。

https://www.w3schools.com/html/html5_canvas.asp https://www.chartjs.org/docs/4.2.0/developers/plugins.html