如何在 React 中的 ChartJS 中始终显示标签

问题描述

我试图将我的数据点放在折线图上以始终显示一个值。像这样：

我发现了一个适用于 ChartJS vanilla 的 solution，但不知道如何将 ChartJS 与 React 一起使用（最好使用功能组件）。

到目前为止，我有一个简单的图表，如下所示：

import React from 'react'
import { Line } from 'react-chartjs-2'

const dataForgraph = () => {
    return {
        labels: ["January","February","march","April","May","June","July"],datasets: [{
            label: "My First dataset",data: [65,59,80,81,56,55,40]
        }]
    }
}

export default function LineChart() {

    const data = (canvas) => {
        const ctx = canvas.getContext("2d")
        return dataForgraph()
    }

    var options = {
    }

    return (
        <Line
            data={data}
            options={options}
        >
        </Line>
    )
}

有人知道从这里去哪里吗？

解决方法

好的，所以在没有弄清楚如何使用上面的 vanilla 方法的情况下，我发现 datalabels plugin 是实现此目的的非常方便的工具。

你所要做的就是运行 npm install chartjs-plugin-datalabels --save

然后添加到您的组件 .js 文件中： import 'chartjs-plugin-datalabels';

这就是您需要的全部内容：

我发现 codesandbox 上有一个很好的示例，它演示了如何更改标签内容和格式。这是用于条形图 - 但我发现将代码传输到我的折线图并不困难。