javascript - Chart.update 不是函数类型错误

Question

尝试单击 Web 应用程序上的某些按钮时出现此错误。

“TypeError：chart.update 不是函数”

我正在尝试使用 react 和 chart.js 制作用户交互式图表。我找到了 chart.js 的文档并实现了addData()andremoveData()函数，但我不确定为什么会出现这个错误。

任何意见，将不胜感激！我是 javascript 的初学者并做出反应。这是我的代码：

import React, { Component } from "react";
import { Bar } from "react-chartjs-2";

class Orders extends Component {
  state = {};
  constructor(props) {
    super(props);
    this.addData = this.addData.bind(this);
    this.state = {
      chartData: {
        labels: ["Shoes", "Necklace", "T-Shirt", "Jeans", "Sweater", "Hat"],
        datasets: [
          {
            fill: "start",
            label: "Number of Orders Today",
            data: [32, 45, 12, 76, 70, 19],
            backgroundColor: [
              "rgba(255, 99, 132, 0.6)",
              "rgba(54, 162, 235, 0.6)",
              "rgba(255, 206, 86, 0.6)",
              "rgba(75, 192, 192, 0.6)",
              "rgba(153, 102, 255, 0.6)",
              "rgba(201, 99, 132, 0.6)",
            ],
            borderWidth: 1,
          },
        ],
      },
    };
  }

  addData(chart) {
    console.log(document.getElementById("category").value);
    chart.labels.push(document.getElementById("category").value);
    console.log(chart.labels);
    chart.datasets.forEach((dataset) => {
      dataset.data.push(document.getElementById("numOfOrders").value * 1);
    });
    chart.update();
  }

  removeData(chart) {
    chart.labels.pop();
    chart.datasets.forEach((dataset) => {
      dataset.data.pop();
    });
    chart.update();
  }

  render() {
    return (
      <div className="orders">
        <h1>Orders</h1>
        <div style={{ height: "500px", width: "500px" }}>
          <Bar
            data={this.state.chartData}
            options={{
              responsive: true,
              title: { text: "" },
            }}
          />
          <div>
            <label for="numOfOrders">NumberOfOrders:</label>
            <input name="numOfOrders" id="numOfOrders" type="number"></input>
            <label for="item">Item:</label>
            <input name="item" id="category" type="text"></input>
          </div>
          <button
            onClick={() => {
              this.addData(this.state.chartData);
            }}
          >
            Add Item
          </button>
          <button
            onClick={() => {
              this.removeData(this.state.chartData);
            }}
          >
            Remove Item
          </button>
        </div>
      </div>
    );
  }
}

export default Orders;

标签： javascriptreactjschart.js

Answer 1

问题是您update()在chartData对象上调用而不是在图表实例上调用。该chartData对象没有update()功能。

此处解释了如何获取对 Chart.js 实例的引用。

下面的代码片段说明了需要在代码中更改哪些内容才能解决您的问题。

constructor() {
  ... 
  this.chartReference = React.createRef(); 
}

componentDidMount() {
  this.chart = this.chartReference.current.chartInstance;
  ...
}

addData(chart) {
   ...
   this.chart.update(); // instead of chart.update();
}

removeData(chart) {
   ...
   this.chart.update(); // instead of chart.update();
}

render() {
  return (
    ...
    <Bar
      ref={this.chartReference}
      ...
    />
    ...
  );
}