#reactjs #frontend #chart.js #react-chartjs #react-chartjs-2
Вопрос:
Я пытаюсь использовать chart-js и react-chartjs-2, но показываю следующую ошибку:
Не удалось скомпилировать.
./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js/auto' in 'C:UsersAnchart-reactproject-folderclientnode_modulesreact-chartjs-2dist'
мой код:
import React from "react";
import { Bar } from "react-chartjs-2";
function ChartData() {
const data = {
labels: ["1", "2", "3", "4", "5", "6"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.2)",
},
],
};
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
return (
<div>
<Bar data={data} options={options} />
</div>
);
}
export default ChartData;
установленные зависимости:
«chart.js»: «^2.9.4», «react-chartjs-2»: «^3.0.3»
Ответ №1:
Установка последней версии chart.js
должна это исправить.
# with npm
npm install chart.js@latest
# with yarn
yarn add chart.js@latest
Это будет обновлено chart.js
до последней версии (в настоящее 3.3.0
время ).
Я верю, что это будет работать до тех пор, пока chart.js
существует основная версия 3
.
Вот рабочая демонстрационная версия с chart.js
установленной последней версией.
Дополнительные примечания
Вы используете версию v2 chart.js
, но версию v3 react-chartjs-2
.
react-chartjs-2
Зависимости одноранговых узлов определяют использование chart.js
версии ^3.1.0
. Они также упоминают использование v3 chart.js
в файле README.
npm
yarn
Приведенных выше команд или установить должно быть достаточно, если вы согласны с использованием последней версии chart.js
.