不呈现Chart.js的饼图

Question

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

我已经成功地渲染了一个线图，但出于某种原因，我的饼图只是呈现一个空的画布。这是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解决了呈现问题。