作者:魂丢丶她城 | 来源:互联网 | 2023-05-26 02:52
我复制了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
}
});
$(function(){
var feedsList = Global_feedsList;
console.log("feeds:"+feedsList);
React.renderComponent(
,
document.getElementById('ribbon')
);
React.renderComponent(
, document.getElementById('content')
);
React.renderComponent(
, document.getElementById('mycomponent')
);
})
var pieOptiOns= {
animatable: true,
segmentShowStroke : true,
segmentStrokeColor : "#fff",
segmentStrokeWidth : 2,
percentageInnerCutout : 0,
animationSteps : 100,
animationEasing : "easeOutBounce",
animateRotate : true,
legendTemplate : "-legend\"><% for (var i=0; i- \"><%if(segments[i].label){%><%=segments[i].label%><%}%>
<%}%>
"
};
使用这两个站点作为参考来编写上面的代码:http
:
//jhudson8.github.io/react-chartjs/index.html http://www.chartjs.org/docs/#doughnut-pie-chart