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');

我的图表开始显示。希望这可以帮助任何可能对图表没有出现任何错误或任何事情感到沮丧的人。当你查看源代码并看到空白画布时，你会知道我在说什么。

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;

react-chartjs饼图无法呈现

2 个答案: