javascript - 饼图不呈现 React Chart.js

Question

我正在尝试使用 Chart.js 库在 React 组件中呈现一个简单的饼图。

我已经设法渲染了一个折线图，但出于某种原因，我的饼图只渲染了一个空 Canvas 。 chartData 无效是否有问题？我没有收到任何类型的错误。

import React, { Component, PropTypes } from 'react';
import * as axios from 'axios';
import s from './Test.css';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import cx from 'classnames';

var PieChart = require("react-chartjs").Pie;

class Test extends Component {

  constructor(props) {
    super(props);
    this.chartData = {
      datasets: [{
        data: [100, 200, 300],
        backgroundColor: ["#FF6384", "#36A2EB", "FFCE56"]
      }]
    };
    this.chartOptions = {
      scale: {
        reverse: true,
        ticks: {
          beginAtZero: true
        }
      }
    };
  };

  render() {
    return(<div className={s.graphic}><PieChart data={this.chartData} options={this.chartOptions} width="600" height="250" /></div>);
  }
}

export default withStyles(s)(Test);

Answer 1

为第一个(非)回答道歉。我实际上得到了某个地方:

问题是我的 CSS。

canvas {
    width: 100% !important;
    height: auto !important;
}

出于某种我仍然不知道的原因，强制饼图大小导致它无法呈现。删除 css 解决了渲染问题。