如何从 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