[英]React-Chartjs-2: All Data Not Showing on The Chart
I'm trying to create line charts using react-chartjs-2. 我正在尝试使用react-chartjs-2创建折线图。 I am getting the data from an api and rendering it to each chart during the componentWillMount phase.
我正在从api获取数据,并在componentWillMount阶段将其呈现到每个图表。 I know that I'm getting the correct data because I originally created the charts using Sparklines components and the charts were perfect.
我知道我得到了正确的数据,因为我最初使用Sparklines组件创建了图表,并且图表非常完美。 I decided to use Chartjs instead because of the ability to customize the charts.
由于可以自定义图表,因此我决定使用Chartjs。 The problem is that only the first 2 data points are showing up on each chart.
问题在于每个图表上仅显示前两个数据点。 Can someone please tell me what I'm doing wrong here?
有人可以告诉我我在做什么错吗? Am I forgetting something in the chart options?
我在图表选项中忘记了什么吗? I'm relatively new to React so I'm just getting a feel for using outside components.
我对React还是比较陌生的,所以我只是对使用外部组件有所了解。 Thanks!
谢谢!
import {Bar, Line, Pie} from 'react-chartjs-2';
export default (props) => {
const chartData = {
labels: [],
datasets: [{
label: 'Total Kills per Game',
data: props.data,
backgroundColor: props.color
}]
}
return(
<div className="chart">
<Line
data={chartData}
options={{
maintainAspectRatio: false,
title: {
display: false,
text: 'Title',
fontSize: 25
},
legend: {
display: false,
position: 'bottom'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date',
fontSize: 10
},
//type: 'linear',
position: 'bottom',
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Total',
fontSize: 10
}
}]
}
}}
/>
</div>
)
}
Try setting your labels vaiable to something other than empty list - eg Array(this.props.date.length).map((x) => x) 尝试将标签设置为空列表以外的其他内容,例如Array(this.props.date.length).map((x)=> x)
const chartData = {
labels: Array(props.data.length).map((x) => x),
datasets: [{
label: 'Total Kills per Game',
data: props.data,
backgroundColor: props.color
}]
Yes you are solid on that point your data has arrived perfectly.The conflict is you have faced that "maintainAspectRatio: false". 是的,您很确定那一点,您的数据已经完美到达。冲突是您遇到了“ maintainAspectRatio:false”。 maintainAspectRatio is used for scaled map height based on data ratio.
maintenanceAspectRatio用于基于数据比率的缩放地图高度。
Just Remove "maintainAspectRatio: false" form options,you will get it perfect. 只需删除“ maintainAspectRatio:false”表格选项,您将使其变得完美。
Thank You. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.