[英]Usage of ChartJS v3 with TypeScript and Webpack
Up until release 2.9.4 , I used ChartJS in combination with @types/chart.js to get all the types for TypeScript support.直到2.9.4 版本,我结合使用 ChartJS 和@types/chart.js来获取 TypeScript 支持的所有类型。 My working minimal example with Webpack and TypeScript looks as follows:
我使用 Webpack 和 TypeScript 的最小工作示例如下所示:
package.json: package.json:
{
"devDependencies": {
"@types/chart.js": "^2.9.31",
"ts-loader": "^8.1.0",
"typescript": "^4.2.3",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"chart.js": "^2.9.4"
}
}
tsconfig.json: tsconfig.json:
{
"compilerOptions": {
"esModuleInterop": true,
},
}
webpack.config.json: webpack.config.json:
module.exports = {
entry: {
main: "./main.ts",
},
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
exclude: /node_modules/,
},
],
},
};
main.ts: main.ts:
import Chart from "chart.js";
new Chart("chart", {
type: 'line',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: "Dataset 1",
data: [1, 2, 3],
}]
},
});
index.html:索引.html:
<!DOCTYPE html>
<html>
<body>
<canvas id="chart"></canvas>
<script src="main.js"></script>
</body>
</html>
But after updating to version 3.0.0 , this doesn't work anymore (I removed @types/chart.js because chart.js ships its own types since that release):但是在更新到版本 3.0.0之后,这不再起作用(我删除了@types/chart.js ,因为chart.js自该版本以来发布了自己的类型):
npx webpack serve --mode development npx webpack 服务 --mode 开发
ERROR in [...]/chartjs/main.ts
./main.ts 3:4-9
[tsl] ERROR in [...]/chartjs/main.ts(3,5)
TS2351: This expression is not constructable.
Type 'typeof import("[...]/chartjs/node_modules/chart.js/types/index.esm")' has no construct signatures.
But since the inbuilt class Chart
does in fact have a constructor , I don't really understand the problem and how to fix it.但由于内置的 class
Chart
实际上有一个构造函数,我不太明白这个问题以及如何解决它。 What is the intended way of using ChartJS version 3 in combination with Webpack and TypeScript?将 ChartJS 版本 3 与 Webpack 和 TypeScript 结合使用的预期方式是什么?
Thanks in advance for any tip which leads me into the right direction here!在此先感谢您提供的任何提示,这些提示将我引向正确的方向!
Chart.js 3 is tree-shakeable , so it is necessary to import and register the controllers, elements, scales and plugins you are going to use. Chart.js 3 是tree-shakeable ,因此需要导入和注册您将要使用的控制器、元素、比例和插件。
Please take a look at Bundlers (Webpack, Rollup, etc.) from the Chart.js documentation.
请查看 Chart.js 文档中的Bundlers(Webpack、Rollup 等) 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.