Chart.js折线图显示双Y轴、刻度标签白色配置不生效问题

原异常效果截图：

• 双Y轴异常：scales.yAxes配置数组包含两个独立对象，Chart.js会为数组内的每个配置项生成一个独立坐标轴，因此出现两个Y轴。原本属于同一个Y轴的网格线配置，被错误拆分为数组的第二个元素。
• 刻度白色配置不生效：刻度标签的颜色规则必须定义在ticks配置对象内部，当前color: 'white'被写在与ticks平级的轴配置根层级，层级错误导致配置不生效。另外注意版本差异：Chart.js 2.x版本刻度颜色配置项为ticks.fontColor，3.x及以上版本为ticks.color。

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,
            // 3.x及以上版本保留color，2.x版本替换为fontColor: 'white'
            color: 'white'
          },
          gridLines: {
            color: 'white',
            zeroLineColor: 'white',
          }
        }
      ]
    }
  }
});

注意：当前X轴标签数组长度为10，Y轴数据数组长度为11，长度不匹配会导致最后一个数据点无对应X轴标签，需对齐两个数组长度。

内容的提问来源于stack exchange，提问作者Sumin Oh