reactjs中的饼图
问题描述：
我正在尝试在Web应用程序中实现饼图，并且发现它是一个很好的来源.
I'm trying to implement a pie chart in my web application and i found this as a good source.
https://github.com/reactjs/react-chartjs
但是它没有提供赋予chartData和chartOptions的方法以使其起作用.我该怎么办?
But it does not provide the way to give chartData and chartOptions inorder to make it work. How can i do this?
我的代码
import React, {Component} from 'react';
var LineChart = require("react-chartjs").Line;
class PieChart extends Component {
constructor() {
super();
}
render() {
return (
<div className="">
<LineChart data={chartData} options={chartOptions} width="600" height="250"/>
</div>
);
}
}
export default PieChart;
我得到这些错误
12:34 error 'chartData' is not defined no-undef
12:54 error 'chartOptions' is not defined no-undef
答
您需要初始化chatData和chartOptions，并且react-chartjs依赖于chartjs，因此您也需要安装 >
You need to initialise chatData and chartOptions and also react-chartjs has a dependency on chartjs, so you need to install that too
npm install --save chart.js@^1.1.1
代码
import React, {Component} from 'react';
import Chartjs from 'chart.js'
var LineChart = require("react-chartjs").Line;
class PieChart extends Component {
constructor() {
super();
}
render() {
var chartOptions: {
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - Whether to show a dot for each point
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Line Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
}
var chartData= {
labels: ['1', '2', '3', '4'],
datasets: [
{
label: 'Current lag',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
data: [50, 35, 60, 67]
}
]
}
return (
<div className="">
<LineChart data={chartData} options={chartOptions} width="600" height="250"/>
</div>
);
}
}
export default PieChart;