Question

我在我的应用程序中将react-chartjs-2与chartjs一起使用，并且我想使用chartjs-plugin-datalabels显示标题。如何在react-chartjs-2中注册此插件？

我进一步研究了这个问题。我发现chartjs接口存在问题（我使用打字稿）。根据shartjs文档，我可以将数据集指定为两个数字的数组。

data: [[5,6], [-3,-6]]

但是接口（来自chartjs）声明为

data?: Array<number | null | undefined> | ChartPoint[];

这是一个矛盾。并且有很多相同的属性。我猜这就是为什么插件不起作用的原因。

图表配置

let options = {
    plugins: {
        datalabels: {
            formatter(value: any, context: any) {
                if (value) {
                    return context.dataset.label;
                }

                return '';
            },
        },
    },
    title: {
        display: false,
    },
    maintainAspectRatio: false,
    resposive: false,
    tooltips: {
        mode: 'index',
        intersect: true,
    },
    scales: {
        xAxes: [{
            ticks: {
                suggestedMin: 0,
                suggestedMax: 100,
                stepSize: 1,
                display: false,
            },
            display: false,
            stacked: false,
            scaleLabel: {
                display: false,
            },
        }],
        yAxes: [{
            stacked: true,
            ticks: {
                display: false,
            },
        }],
    },
    legend: {
        display: false,
    },
};

Answer 1

您是说如何将其导入到项目中？

我使用chartjs-plugin-annotation，我只是添加到导入部分的顶部：

import 'chartjs-plugin-annotation';

如何将npm-plugins与react-chartjs-2一起使用？

1 个答案: