饼图不呈现反应Chart.js

我想使用Chart.js库呈现反应组件中的简单饼图。饼图不呈现反应Chart.js

我设法渲染了一个折线图，但由于某种原因，我的饼图只是渲染一个空的画布。这是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);

来源

2016-11-08 Carlos Pinho

第一个（非）答案的道歉。我其实已经到了某个地方：

问题是我的CSS。

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

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

来源

2017-04-02 17:00:07 lcardito

饼图不呈现反应Chart.js

回答

相关问题