react-chartjs饼图不呈现

Question

我复制了react-chartjs文件夹并执行了以下操作：

在顶部做了react-chartjs/pie库的要求。我没有看到任何控制台错误，但我的饼图没有呈现。我甚至试着把这里提到的所有选项都放进去。

var PieChart = require('../../components/react-chartjs/pie');

var MyComponent = React.createClass({
  render: function() {
  var pieOptions = {
            animatable: true,
      };
  var pieData = [
              {
                  value: 300,
                  color:"#F7464A",
                  highlight: "#FF5A5E",
                  label: "Red"
              },
              {
                  value: 50,
                  color: "#46BFBD",
                  highlight: "#5AD3D1",
                  label: "Green"
              },
              {
                  value: 100,
                  color: "#FDB45C",
                  highlight: "#FFC870",
                  label: "Yellow"
              },
              {
                  value: 40,
                  color: "#949FB1",
                  highlight: "#A8B3C5",
                  label: "Grey"
              },
              {
                  value: 120,
                  color: "#4D5360",
                  highlight: "#616774",
                  label: "Dark Grey"
              }
          ];
    return <PieChart data={pieData} options={pieOptions}/>
 }
});

$(function(){
    var feedsList = Global_feedsList;
    console.log("feeds:"+feedsList); 
    React.renderComponent(
        <BreadCrumb breadCrumbs={['Admin','Brokers']}/>,
        document.getElementById('ribbon')
    );

    React.renderComponent(
            <PVDashboard feedsList={feedsList}/>, document.getElementById('content')
    );

    React.renderComponent(
            <MyComponent />, document.getElementById('mycomponent')
    );

})    


var pieOptions = {
            animatable: true,
            segmentShowStroke : true,
            segmentStrokeColor : "#fff",
            segmentStrokeWidth : 2,
            percentageInnerCutout : 0,
            animationSteps : 100,
            animationEasing : "easeOutBounce",
            animateRotate : true,
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
  };

使用这两个站点作为参考来编写上面的代码：http://jhudson8.github.io/react-chartjs/index.html http://www.chartjs.org/docs/#doughnut-pie-chart

Answer 1

我知道这是一个老问题，但我遇到了与上面的问题完全相同的问题。没有错误，数据和选项与chartjs文档匹配。

我的解决方法是我没有在项目本身中包含普通的chartjs需求。文档(https://github.com/jhudson8/react-chartjs/)说明如下:您还必须将chart.js和React作为依赖项包括在内。

因此，当我添加以下内容时：

var PieChart = require('../../components/react-chartjs/pie'); // From Example
var Chart = require('chartjs'); 

我的图表开始出现了。希望这能帮助那些对图表没有显示出错误或任何东西而感到沮丧的其他人。当你查看源代码，看到一张空白的画布时，你就会知道我在说什么。

Answer 2

@peter同样的问题。需要添加以粗体显示的以下行，以使一切正常工作：

import React from 'react';
var LChart = require("react-chartjs").Line;
**var Chart = require('chartjs');**
class LineChart extends React.Component {


    render() {

        return <LChart data={this.props.data} width="600" height="250" redraw/>
    }   

}

export default LineChart;