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 文档匹配。

对我来说，解决方法是我没有将 vanilla Chartjs 要求包含到项目本身中。文档 ( https://github.com/jhudson8/react-chartjs/ ) 声明如下：您还必须包含 Chart.js 和 React 作为依赖项。

所以当我添加以下内容时：

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

我的图表开始出现。希望这可以帮助任何可能因图表未正确显示而感到沮丧的人。当您查看源代码并看到空白画布时，您就会知道我在说什么。