如何使图表的轴使用相同的比例缩放？

Question

使用Chart.js，我绘制了一个散点图。图表上的点将始终在轴上。目前，我正在使用以下选项和数据：

public scatterChartLabels:string[] = ['Experiencing', 'Ideation', 'Thinking', 'Evaluation'];

public scatterChartData = [
    {
      x: 0,
      y: localStorage.getItem('col1')
    }, {
      x: localStorage.getItem('col2'),
      y: 0
    }, {
      x: 0,
      y:  - localStorage.getItem('col3')
    },
    {
      x: - localStorage.getItem('col4'),
      y: 0
    },
    {
      x: 0,
      y: localStorage.getItem('col1')
    }
  ]

  public scatterChartOptions = {
    showLines: true,
    yAxes: {
      gridLines: {
        zeroLineWidth: 100
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          zeroLineColor: '#c1272d'
        },
      }],
      yAxes: [{
        gridLines: {
          zeroLineColor: '#c1272d'
        }
      }],
    }
  }

  public scatterChartType: string = 'scatter';

  public scatterChartCustomColors = [{
    backgroundColor: 'rgba(255, 147, 29, 0.5)',
    borderColor: 'rgba(255, 147, 29)',
    pointBackgroundColor: 'rgba(255, 147, 29, 0.5)',
    pointBorderColor: 'rgba(255, 255, 255)'
  }]

这将产生以下图表：

如何使图表在两个轴上使用相同的比例？例如，如果最高y轴值为130，如何使最低y轴刻度线变为130，而使x轴刻度线变为-130和130？

Answer 1

我能够通过更新每个轴的刻度设置来做到这一点：

public scatterChartOptions = {
    ...
    scales: {
      xAxes: [{
        ticks: {
          min : - 130,
          max : 130
        }
      }],
      yAxes: [{
        ticks: {
          min : - 130,
          max : 130
        }
      }]
    }
  }