React-chartjs-2:图表上未显示的所有数据

Question

我正在尝试使用 react-chartjs-2 创建折线图。我正在从 api 获取数据，并在组件将挂载阶段将其呈现到每个图表。我知道我得到了正确的数据，因为我最初使用迷你图组件创建了图表，并且图表非常完美。我决定改用 Chartjs，因为它能够自定义图表。问题是每个图表上只显示前 2 个数据点。有人可以告诉我我在这里做错了什么吗？我是否忘记了图表选项中的某些内容？我对 React 相对较新，所以我只是对使用外部组件有所了解。 谢谢！

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>
)
}

Answer 1

尝试将标签设置为空列表以外的其他内容 - 例如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
}]

Answer 2

是的，您在这一点上是可靠的，您的数据已经完美到达。冲突是你遇到了"维护纵横比：假"。维护纵横比用于基于数据比率的比例地图高度。

只需删除"维护纵横比：假"表单选项，您就会得到完美的。

谢谢。