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

Question

我正在尝试使用react-chartjs-2创建折线图。我从一个应用程序接口中获取数据，并在componentWillMount阶段将其呈现给每个图表。我知道我得到了正确的数据，因为我最初使用Sparkline组件创建了图表，并且图表非常完美。我决定使用Chartjs，因为它具有自定义图表的能力。问题是每个图表上只显示前两个数据点。有人能告诉我我哪里做错了吗？我是否忘记了图表选项中的某些内容？我是一个相对较新的反应，所以我只是对使用外部组件的感觉。谢谢!

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

是的，在这一点上你是可靠的，你的数据已经到达perfectly.The冲突是你曾经面对过的"maintainAspectRatio: false“。maintainAspectRatio用于根据数据比率缩放地图高度。

只需删除"maintainAspectRatio: false“表单选项，您将获得完美。

谢谢。