React-Chartjs-2：所有數據未顯示在圖表上

Question

我正在嘗試使用react-chartjs-2創建折線圖。 我正在從api獲取數據，並在componentWillMount階段將其呈現到每個圖表。 我知道我得到了正確的數據，因為我最初使用Sparklines組件創建了圖表，並且圖表非常完美。 由於可以自定義圖表，因此我決定使用Chartjs。 問題在於每個圖表上僅顯示前兩個數據點。 有人可以告訴我我在做什么錯嗎？ 我在圖表選項中忘記了什么嗎？ 我對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

嘗試將標簽設置為空列表以外的其他內容，例如

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

Answer 2

是的，您很確定那一點，您的數據已經完美到達。沖突是您遇到了“ maintainAspectRatio：false”。 maintenanceAspectRatio用於基於數據比率的縮放地圖高度。

只需刪除“ maintainAspectRatio：false”表格選項，您將使其變得完美。

謝謝。