Question

我现在尝试使用任意数据向我的应用添加条形图，但我无法渲染它。它已正确导入，并且我使用了chart.js网站上的示例代码，但没有运气。我错过了什么？

import Chart from 'chart.js';
import React, { Component } from 'react';

class ChartTeamOne extends Component {
setState(){
  const t1ChartEl= document.getElementById("teamOneCanvas");
  let teamOneChart = new Chart(t1ChartEl,{
  type: 'bar',
  data: {
    labels: ["Red", "Blue"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
}
render(){
return(
  <canvas id="teamOneCanvas"></canvas>
);
}
}

export default ChartTeamOne;

Answer 1

这是因为你在setState函数中有这个，这不是设置任何状态。这应该在componentDidMount（）生命周期函数中。

setState（）用于更新应用程序https://facebook.github.io/react/docs/component-api.html的状态，其中componentDidMount（）将在初始渲染发生后装入组件时触发，并将执行内部函数。 https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Answer 2

chart.js需要画布才能“覆盖”才能绘制图表。你有一个正确返回画布的部分。但您要查找的功能是componentDidMount()而不是setState()。我已经把他们的例子用于饼图并为它创建了一个反应类。更改代码以匹配更改应该非常简单。

import Chart from 'chart.js';
import React, {
    Component
} from 'react';

export default class PieChart extends Component {
    componentDidMount() {
        debugger;
        const ctx = document.getElementById("pie-chart");
        const data = {
            labels: [
                "Red",
                "Blue",
                "Yellow"
            ],
            datasets: [{
                data: [300, 50, 100],
                backgroundColor: [
                    "#FF0000",
                    "#0000FF",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }]
        };
        const pieChart = new Chart(ctx, {
            type: 'pie',
            data: data
        });
    }
    render() {
        return (
            <canvas id="pie-chart"></canvas>
        );
    }
}

为什么使用chart.js的条形图不能在react.js中呈现？

2 个答案: