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

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

是的，您在那一点上很坚定，您的数据已完美到达。冲突是您遇到了“ maintainAspectRatio：false”。 maintenanceAspectRatio用于根据数据比率缩放地图高度。

只需删除“ maintainAspectRatio：false”表单选项，您将使其变得完美。

谢谢。

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

2 个答案: