Question

这是我目前的折线图。 x 轴只是一个模拟数据，所以希望你们可以忽略使用的坏数据。正如您在 y 轴上看到的，它从 60 开始，这不是我想要的。我试过 beginAtZero = true 但它不起作用。我还想删除标签 weight，但通过简单地删除而不放置标签，它会显示 undefined。

下面是折线图的代码。

import React from 'react'
import {Line} from 'react-chartjs-2'

function LineChart(datasets) {
  const dataset = datasets.data
  return (
    <div>
      <Line
        data={{
          labels: dataset.map(data=> data.created_at),
          datasets: [{
            label: 'Weight',
            data: dataset.map(data => data.weight),
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1,
            borderColor: 'rgb(255, 99, 132)',
          }]
        }}
        height = {200}
        options = {{
          resposive: true,
          maintainAspectRatio: true,
          scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                    beginAtZero: true,
                }
            }]
          }
        }}
      />
    </div>
  )
}

export default LineChart

Answer 1

您似乎使用的是 Chart.js 版本 3，其中 scales 选项需要以不同方式定义（请参阅 Chart.js documentation）。

options = {{ 
  resposive: true,
  maintainAspectRatio: true,
  scales: {
    y: {
      beginAtZero: true          
    }
  }      
}}

Chart.js 折线图 y 轴不是从 0 开始

1 个答案: