Chartjs双条形图不能有多个同名属性

Question

我正在尝试使用 Typescript 在 React.js 中绘制双条形图，但是我收到错误 'An object literal cannot have multiple properties with the same name in strict mode'。奇怪的是，错误仅出现在属性 backgroundColor 上，即使所有其他属性都具有相同的名称。

我试图在我的 tsconfig、json 文件中将 'strict' 设置为 false，但是当我使用 npm start 时，它被设置回 true 并显示消息：

The following changes are being made to your tsconfig.json file:
  - compilerOptions.strict to be suggested value: true (this can be changed)

这是我用来在 chart.js

中设置图表选项的代码

datasets: [
                    {
                          label: "Surveys Started",
                          backgroundColor: gradientFill,
                          borderColor: "#f96332",
                          pointBorderColor: "#FFF",
                          pointBackgroundColor: "#FFF",
                          backgroundColor: '#FF3333',
                          pointBorderWidth: 2,
                          pointHoverRadius: 4,
                          pointHoverBorderWidth: 1,
                          pointRadius: 4,
                          fill: true,
                          borderWidth: 1,
                          data: this.state.data[0]
                        },
                    {
                        label: "Surveys Completed",
                        backgroundColor: gradientFill,
                        pointBackgroundColor: "#2CA8FF",
                        backgroundColor: '#3733FF',
                        pointBorderWidth: 2,
                        pointHoverRadius: 4,
                        pointHoverBorderWidth: 1,
                        pointRadius: 4,
                        fill: true,
                        borderWidth: 1,
                        data: this.state.data[1]
                    }

Answer 1

看起来 gradientFill 变量本身有问题。

注释掉gradientFill变量，用字符串设置backgroundColor（例如'#fff'），看看错误是否消失。如果是，则审查 gradientFill.

的实施

Chartjs双条形图不能有多个同名属性

Chartjs double bar chart cannot have multiple properties with the same name

reactjs

typescript

react-chartjs