React-Chartjs-2：图表上未显示所有数据答案

【问题标题】：React-Chartjs-2: All Data Not Showing on The ChartReact-Chartjs-2：图表上未显示所有数据
【发布时间】：2018-09-15 21:18:03
【问题描述】：

我正在尝试使用 react-chartjs-2 创建折线图。我在 componentWillMount 阶段从 api 获取数据并将其渲染到每个图表。我知道我得到了正确的数据，因为我最初使用 Sparklines 组件创建了图表，并且这些图表非常完美。由于能够自定义图表，我决定改用 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>
 )
}

【问题讨论】：

我意识到这与 chartData 对象中的标签属性有关。每个数据点都需要一个对应的标签。

标签： javascript reactjs chart.js2

【解决方案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
}]

【讨论】：

【解决方案2】：

是的，您在这一点上很可靠，您的数据已经完美到达。冲突是您遇到了“maintainAspectRatio：false”。 maintainAspectRatio 用于根据数据比例缩放地图高度。

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

谢谢。

【讨论】：

谢谢@menomanabdulla。我试过了，但它仍然没有用。出于某种原因，在为每个点添加标签之前，我无法得到超过 2 个点的线。
是的，您应该为每个点添加标签。您可以灵活地删除这些标签。这是我编的一个例子：Here-Click