在chart.js中设置最大条形高度

mfpqipee  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(175)

我在angular中使用了chart.js,代码如下:

const myChart = new Chart('myChart', {
          type: 'bar',
          data: {
              labels: ['Mathematics', 'English', 'Physics', 'Chemistry' ],
              datasets: [{
                  label: 'Score',
                  data: [this.mathematics_score,this.english_score,this.physics_score,this.chemistry_score],
                  backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                  ],
                  borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                  ],
                  borderWidth: 1,

              }]
          },
          options: {
            indexAxis: 'x',
            responsive: true,
              scales: {
                  x: {
                      beginAtZero: true,
                      min: 0,
                    max: 90
                  }

              }
          }
      });

这里的科目分数是50分,但在图表中的高度是根据科目中的最大分数设置的。假设我在数学中得到40分,在英语中得到38分,在物理和化学中分别得到30分和28分,那么图表中的最大值是40分,但我想要50分。
任何解决方案,谢谢

falq053o

falq053o1#

当需要在y轴上设置最大值时,您尝试在x轴上设置最大值。如果您这样做,它将按预期工作:

options: {
  scales: {
    y: {
      max: 50,
    }
  }
}

相关问题