1

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

在此处输入图像描述

我找到了一个适用于 ChartJS vanilla 的解决方案，但无法弄清楚如何将 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>
    )
}

有谁知道从这里去哪里？

4

2 回答 2

1

我无法让标签显示为 2.0.0 版本的插件和 v3 的 react-chartjs-2 直到我发现我们需要以某种方式（特定图表或全局）显式注册插件，因为版本 v1 插件.

https://v2_0_0--chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#integration

注册：从 1.x 版本开始，这个插件不再自动注册。必须在全局或本地手动注册

import ChartDataLabels from 'chartjs-plugin-datalabels';

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

// OR only to specific charts:
var chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  options: {
    // ...
  }
})
于 2021-08-25T05:10:23.480 回答
0

好的，所以在没有弄清楚如何使用上面的 vanilla 方法的情况下，我发现datalabels 插件是一个非常方便的工具来实现这一点。

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

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

这就是你得到这个所需的全部： 在此处输入图像描述

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

于 2021-02-11T16:05:20.257 回答