餅圖不呈現反應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

回答

相關問題