4

我已经设法弄清楚如何在 React 应用程序中为新的 chart.js 3.0.0 导入和注册模型，但我不知道如何使用 Chart.helpers.color。这是我的导入和注册：

import React from 'react';
import { Chart, Tooltip, CategoryScale, LinearScale, Title } from 'chart.js';
import { Matrix, MatrixController } from 'chartjs-chart-matrix';

Chart.register(Tooltip, CategoryScale, LinearScale, Title, Matrix, MatrixController);

然而，当我调用 Chart.helpers.color 时，如下所示：

        datasets: [{
            label: 'My Matrix',
            data: chartData,
            backgroundColor(context) {
                const value = context.dataset.data[context.dataIndex].v;
                const alpha = Math.log10(value) / 4;
                    return Chart.helpers.color('green').alpha(alpha).rgbString();
            },
            ...

应用程序抛出 TypeError: chart_js__WEBPACK_IMPORTED_MODULE_1__.Chart.helpers is undefined

任何人都知道我怎样才能让这个 React 应用程序访问 Chart.helpers？谢谢！（或者，当然，欢迎使用替代方法！这是用于使用 alpha 绘制热图来表示值。）

4

1 回答 1

6

我想通了，我将发布答案，因为这花了我几天的时间才弄清楚。我在这里找到了关于它的 chart.js repo 的简介：

https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/publishing.md

所以在我的例子中，我在顶部：

import React from 'react';
import { Chart, Tooltip, CategoryScale, LinearScale, Title } from 'chart.js';
import { color } from 'chart.js/helpers';
import { Matrix, MatrixController } from 'chartjs-chart-matrix';
Chart.register(Tooltip, CategoryScale, LinearScale, Title, Matrix, MatrixController);

然后我以这种方式访问​​ Chart.helpers.color ：

return color('green').alpha(alpha).rgbString();
于 2020-12-17T16:57:46.387 回答