реагируют-chartjs круговая диаграмма не делает

я скопировал папку среагировать-chartjs и сделал ниже:реагируют-chartjs круговая диаграмма не делает

ли требует библиотеки реагирующие-chartjs/пирог сверху. Я не вижу никаких консольных ошибок, но моя круговая диаграмма не отображается. Я даже попробовал поставить все варианты, упомянутые здесь.

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

источник

2015-01-20 Julie

Что происходит? С тем, что вы предоставили, забыть тег скрипта или не запускать браузеру, так же, как и все остальное. – FakeRainBrigand

просто нет piechart rendered и не вижу никаких ошибок также – Julie

Вы не указали свой html. Вы проверили, существует ли элемент с id = mycomponent? Кроме того, ваши pieOptions исходят от локального var внутри MyComponent, а не из-за него. Локальные pieOptions имеют только 1 пару ключ/значение, поэтому попробуйте удалить с нее конечную запятую. – FariaC

Я знаю, что это старый вопрос, но я столкнулся с точно такой же вопрос, как один из приведенных выше , Нет ошибок, данные и параметры соответствовали документации chartjs.

Исправить для меня было то, что я не использовал требование ванильного диаграммы к самому проекту. В документе (https://github.com/jhudson8/react-chartjs/) указано следующее: Вы также должны указать chart.js и React as dependencies.

Поэтому, когда я добавил следующее:

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

Мои карты начали появляться. Надеюсь, это поможет любому, кто может быть расстроен диаграммами, которые не появляются без ошибок или чего-то еще. Вы узнаете, о чем я говорю, когда вы просматриваете источник и видите чистый холст.

источник

2016-01-09 01:34:52

@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;

источник

2016-01-19 00:21:26 abgordon

реагируют-chartjs круговая диаграмма не делает

ответ

Смежные вопросы