javascript - react-chartjs pie chart not rendering - Stack Overflow

admin管理员组

文章数量:1399329

I copied the react-chartjs folder and did the below:

Did requiring of the react-chartjs/pie library at the top. I do not see any console errors but my pie chart is not rendered. I even tried putting all options mentioned here.

var PieChart = require('../../ponents/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('myponent')
    );

})    


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>"
  };

Used both these sites as references to write above code: .html

I copied the react-chartjs folder and did the below:

Did requiring of the react-chartjs/pie library at the top. I do not see any console errors but my pie chart is not rendered. I even tried putting all options mentioned here.

var PieChart = require('../../ponents/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('myponent')
    );

})    


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>"
  };

Used both these sites as references to write above code: http://jhudson8.github.io/react-chartjs/index.html http://www.chartjs/docs/#doughnut-pie-chart

• javascript
• charts
• reactjs

Share Improve this question Follow edited Dec 15, 2017 at 10:34 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Jan 20, 2015 at 1:57 JulieJulie 18922 silver badges1313 bronze badges 4

• What does happen? With what you've provided, forgetting a script tag, or not running browserify, is as likely as anything else. – Brigand Commented Jan 20, 2015 at 19:40
• just no piechart rendered and don't see any errors also – Julie Commented Jan 22, 2015 at 4:31
• You have not shown your html. Did you verify there exists an element with id=myponent? Also, your pieOptions is ing from the local var inside MyComponent, not the larger one outside it. The local pieOptions has only 1 key/value pair, so try removing the trailing ma from it. – FriC Commented Jul 1, 2015 at 23:15
• The Readme at github./jhudson8/react-chartjs gives as example: <LineChart data={chartData} options={chartOptions} width="600" height="250"/>. You don't have any width or height on your PieChart declaration. Try adding them (just in case). – widged Commented Aug 18, 2015 at 12:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I know this is an old question but I ran into the exact same issue as the one above. No errors, the data and options matched the chartjs documentation.

The fix for me was I did not include vanilla chartjs requirement to the project itself. The documenation (https://github./jhudson8/react-chartjs/) states the following: You must also include chart.js and React as dependencies.

So when I added the following:

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

My charts started showing up. Hope this helps anyone else who may be frustrated with charts not showing up with no errors or anything. You'll know what I'm talking about when you view source and just see a blank canvas.

@peter same issue. Needed to add the following line in bold to make everything work:

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;

本文标签： javascriptreactchartjs pie chart not renderingStack Overflow