Javascript React-Chartjs-2：图表上未显示的所有数据

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

从'react-chartjs-2'导入{Bar，Line，Pie}；
导出默认值（道具）=>{
常量图表数据={
标签：[]，
数据集：[{
标签：“每场比赛的总死亡人数”，
数据：道具数据，
背景颜色：道具颜色
}]
}
返回(
)
}

是的，在这一点上你是可靠的，你的数据已经完美地到达了。冲突在于你面对的是“MaintaintAspectratio:false”。MaintaintAspectRatio用于基于数据比率的缩放地图高度

只需删除“MaintaintAspectRatio:false”表单选项，您就会得到完美的结果

---

谢谢。

尝试将标签设置为空列表以外的其他内容-例如数组（this.props.date.length）.map（（x）=>x）

---

我意识到它与chartData对象中的labels属性有关。每个数据点都需要相应的标签。谢谢@menomanabdulla。我试过了，但还是不行。由于某些原因，在为每个点添加标签之前，我无法获得长度超过2个点的线。是的，您应该为每个点添加标签。您可以灵活地删除这些标签。下面是我编的一个例子：

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

const chartData = {
   labels:  Array(props.data.length).map((x) => x),
   datasets: [{
   label: 'Total Kills per Game',
   data: props.data,
   backgroundColor: props.color
}]