Question

我正在尝试使用Chart.js库在react组件中渲染一个简单的饼图。

我设法渲染折线图，但由于某种原因，我的饼图只是渲染一个空画布。图表数据无效是否有问题？我没有收到任何错误。

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解决了渲染问题。

饼图不呈现React Chart.js

1 个答案: