javascript 如何从ChartJS中的回调返回JSX?

ecbunoof  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(125)

我在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元素的图表?

pn9klfpd

pn9klfpd1#

    • 简短回答**:你不能
    • 说明:**

因为chart.js是一个基于画布的库,它不使用dom元素来显示图表上的内容,所以你需要使用一个svg库,比如recharts。
因此默认情况下,您将被绑定到回调使您能够做的事情。如果您想要更多的自定义,您将需要编写一个自定义插件,使用画布API在画布上绘制您想要的东西。
https://www.w3schools.com/html/html5_canvas.asphttps://www.chartjs.org/docs/4.2.0/developers/plugins.html

相关问题