Chart.js:为什么我的折线图中有两个y轴?

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

我正在使用chart.js构建一个折线图。我不明白为什么图表上有两个y轴。我还尝试将刻度标签的颜色更改为白色,但也不起作用。感谢您的帮助!以下是我的代码预览:https://codepen.io/suminohh/pen/vYROrEx

var xValues = ['6 am','8 am','10 am','12 pm','2 pm','4 pm','6 pm','8 pm','10 pm','12 am'];
        var yValues = [7,8,8,9,9,9,10,11,14,14,15];

        new Chart("myChart", {
          type: "line",
          data: {
            labels: xValues,
            datasets: [{
                fill: false,
              lineTension: 0,
              backgroundColor: "white",
              borderColor: "white",
              data: yValues,
            }]
          },
          options: {
            legend: {display: false},
            scales: {
                xAxes: [{ 
                    gridLines: {
                        color: 'white',
                        zeroLineColor: 'white',
                }}],
              yAxes: [
                {ticks: {
                    min: 6, 
                    max:16,
                },
                    color: 'white',
                },
                {gridLines: {
                        color: 'white', //give the needful color
                        zeroLineColor: 'white',
                    }},
            ],
            }
          }
        });

7nbnzgx9

7nbnzgx91#

因为您已经为yAxes定义了两个轴。使用适当的缩进有助于注意以下事项:

yAxes: [
  {
    ticks: {
      min: 6, 
      max:16,
    },
    color: 'white',
  },
  {
    gridLines: {
      color: 'white', //give the needful color
      zeroLineColor: 'white',
    }
  },
],

看看在color之后,你是如何关闭一个对象并启动另一个对象的,把它们作为一个对象,你就不会有两个轴了:

yAxes: [
  {
    ticks: {
      min: 6, 
      max:16,
    },
    color: 'white',
    gridLines: {
      color: 'white', //give the needful color
      zeroLineColor: 'white',
    }
  },
],

相关问题